树 Tree

无障碍性 Accessibility
文字方向 Bidirectionality
剪贴板 Clipboard
拖放 Drag and Drop
布局 Layout
观察者 Observers
浮层 Overlay
平台 Platform
传送点 Portal
滚动 Scrolling
步进器 Stepper
表格 Table
组件测试工具 Component Harnesses
文本字段 Text field
树 Tree
tree 的 API

Angular CDK tree API 参考文档

import {CdkTreeModule} from '@angular/cdk/tree';

嵌套节点是 <cdk-tree> 的子节点。它适用于嵌套树。通过在树节点模板中使用 cdk-nested-tree-node 组件，会把父节点的子节点添加到树节点模板的 cdkTreeNodeOutlet 中。 该节点的子节点会自动添加到 cdkTreeNodeOutlet 中。

Nested node is a child of <cdk-tree>. It works with nested tree. By using cdk-nested-tree-node component in tree node template, children of the parent node will be added in the cdkTreeNodeOutlet in tree node template. The children of node will be automatically added to cdkTreeNodeOutlet.

选择器： cdk-nested-tree-node
导出为： cdkNestedTreeNode
属性
名称 描述

data: T

树节点的数据。

The tree node's data.

isExpanded: boolean

level: number

nodeOutlet: QueryList<CdkTreeNodeOutlet>

子节点的占位符。

The children node placeholder.
@Input()
已弃用

role: 'treeitem' | 'group'

树节点的角色是什么。

The role of the tree node.

正确的角色是 'treeitem'，不应该使用 'group'。该输入属性将在以后的版本中删除。

@deprecated The correct role is 'treeitem', 'group' should not be used. This input will be removed in a future version.

12.0.0 删除该输入属性

@breaking-change 12.0.0 Remove this input
方法
focus

让此菜单项获得焦点。是对 FocusableOption 的实现。

Focuses the menu item. Implements for FocusableOption.
updateChildrenNodes

把子节点的数据节点添加到 NodeOutlet 中

Add children dataNodes to the NodeOutlet

参数

Parameters

children?

T[]

CdkTree 的数据节点定义。保存该节点的模板和一个 when 谓词，用于描述该节点要在何时使用。

Data node definition for the CdkTree. Captures the node's template and a when predicate that describes when this node should be used.

选择器： [cdkTreeNodeDef]
属性
名称 描述
@Input( cdkTreeNodeDefWhen)

when: (index: number, nodeData: T) => boolean

如果该节点模板应该应用在所提供的节点数据和索引上，则该函数返回 true。如果未定义，那么当该函数对该数据返回 true 时，该节点将被认为是默认的节点模板。对于每一个节点，至少要传入一个 when 函数或者用 undefined 表示默认行为。

Function that should return true if this node template should be used for the provided node data and index. If left undefined, this node will be considered the default node template to use when no other when functions return true for the data. For every node, there must be at least one when function that passes or an undefined to default.

template: TemplateRef<any>

子树数据节点的缩进量。该指令会在节点中添加 left-padding 以展示层次结构。

Indent for the children tree dataNodes. This directive will add left-padding to the node to show hierarchy.

选择器： [cdkTreeNodePadding]
属性
名称 描述
@Input('cdkTreeNodePaddingIndent')

indent: number | string

每个级别的缩进。可以是数字或 CSS 字符串。默认值为 40px，来自 Material Design 菜单中的子菜单规范。

The indent for each level. Can be a number or a CSS string. Default number 40px from material design menu sub-menu spec.
@Input('cdkTreeNodePadding')

level: number

树节点的深度级别。其衬距将是 级别 * 缩进值 像素。

The level of depth of the tree node. The padding will be level * indent pixels.

indentUnits: 'px'

用于表示缩进值的 CSS 单位。

CSS units used for the indentation value.

嵌套的 CdkNode 出口地标。把 [cdkTreeNodeOutlet] 放到标签上，把子数据节点放到这个出口地标中。

Outlet for nested CdkNode. Put [cdkTreeNodeOutlet] on a tag to place children dataNodes inside the outlet.

选择器： [cdkTreeNodeOutlet]
属性
名称 描述

viewContainer: ViewContainerRef

CDK 树组件，用于连接数据源，检索 T 类型的数据，并使用分层结构渲染数据节点。当数据源提供新数据时，会更新数据节点。

CDK tree component that connects with a data source to retrieve data of type T and renders dataNodes with hierarchy. Updates the dataNodes when new data is provided by the data source.

选择器： cdk-tree
导出为： cdkTree
属性
名称 描述
@Input()

dataSource: DataSource<T> | Observable<T[]> | T[]

提供一个包含要渲染的最新数据数组的流。受树的视图流窗口影响（即当前屏幕上有哪些数据节点）。数据源可以是数据数组的可观察对象，也可以是要渲染的数据数组。

Provides a stream containing the latest data array to render. Influenced by the tree's stream of view window (what dataNodes are currently on screen). Data source can be an observable of data array, or a data array to render.
@Input()

trackBy: TrackByFunction<T>

跟踪函数，用于检查数据变化的差异。类似于 ngFor 的 trackBy 函数。 可以优化节点操作，方法是根据该函数处理后的数据来标识一个节点，以了解该节点是否应添加/删除/移动。接受带两个参数 index 和 item 的函数。

Tracking function that will be used to check the differences in data changes. Used similarly to ngFor trackBy function. Optimize node operations by identifying a node based on its data relative to the function to know if a node should be added/removed/moved. Accepts a function that takes two parameters, index and item.
@Input()

treeControl: TreeControl<T, K>

树控制器

The tree controller

viewChange: BehaviorSubject<{ start: number; end: number; }>

这个流包含哪些节点正显示在屏幕上的最新信息。可以被数据源用作该提供哪些数据的线索。

Stream containing the latest information on what rows are being displayed on screen. Can be used by the data source to as a heuristic of what data should be provided.
方法
insertNode

为数据节点模板创建嵌入式视图，并把它放在数据节点视图容器的正确索引位置。

Create the embedded view for the data node template and place it in the correct index location within the data node view container.

参数

Parameters

nodeData

T

index

number

viewContainer?

ViewContainerRef

parentData?

T
renderNodeChanges

检查数据所做的更改，并渲染每个更改（添加/删除/移动节点）。

Check for changes made in the data and render each change (node added/removed/moved).

参数

Parameters

data

readonly T[]

dataDiffer

IterableDiffer<T> = this._dataDiffer

viewContainer

ViewContainerRef = this._nodeOutlet.viewContainer

parentData?

T

CdkTree 的树节点。它包含树节点中的数据。

Tree node for CdkTree. It contains the data in the tree node.

选择器： cdk-tree-node
导出为： cdkTreeNode
属性
名称 描述

data: T

树节点的数据。

The tree node's data.

isExpanded: boolean

level: number

@Input()
已弃用

role: 'treeitem' | 'group'

树节点的角色是什么。

The role of the tree node.

正确的角色是 'treeitem'，不应该使用 'group'。该输入属性将在以后的版本中删除。

@deprecated The correct role is 'treeitem', 'group' should not be used. This input will be removed in a future version.

12.0.0 删除该输入属性

@breaking-change 12.0.0 Remove this input
方法
focus

让此菜单项获得焦点。是对 FocusableOption 的实现。

Focuses the menu item. Implements for FocusableOption.

切换节点，以展开/折叠节点。

Node toggle to expand/collapse the node.

选择器： [cdkTreeNodeToggle]
属性
名称 描述
@Input('cdkTreeNodeToggleRecursive')

recursive: boolean

是否递归展开/折叠节点。

Whether expand/collapse the node recursively.

Base tree control. It has basic toggle/expand/collapse operations on a single data node.

属性
名称 描述

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<K>

A selection model with multi-selection to track expansion status.

getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null)

Gets a stream that emits whenever the given data node's children change.

getLevel: (dataNode: T) => number

Get depth of a given data node, return the level number. This is for flat tree node.

isExpandable: (dataNode: T) => boolean

Whether the data node is expandable. Returns true if expandable. This is for flat tree node.

trackBy: (dataNode: T) => K

Returns the identifier by which a dataNode should be tracked, should its reference change.

Similar to trackBy for *ngFor
方法
collapse

Collapses one single data node.

参数

Parameters

dataNode

T
collapseAll

Collapse all dataNodes in the tree.
collapseDescendants

Collapses a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T
expand

Expands one single data node.

参数

Parameters

dataNode

T
expandAll

Expands all data nodes in the tree.
expandDescendants

Expands a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T
getDescendants

Gets a list of descendent data nodes of a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T

返回值

Returns
T[]
isExpanded

Whether a given data node is expanded or not. Returns true if the data node is expanded.

参数

Parameters

dataNode

T

返回值

Returns
boolean
toggle

Toggles one single data node's expanded/collapsed state.

参数

Parameters

dataNode

T
toggleDescendants

Toggles a subtree rooted at node recursively.

参数

Parameters

dataNode

T

Flat tree control. Able to expand/collapse a subtree recursively for flattened tree.

属性
名称 描述

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<K>

A selection model with multi-selection to track expansion status.

getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null)

Gets a stream that emits whenever the given data node's children change.

getLevel: (dataNode: T) => number

isExpandable: (dataNode: T) => boolean

options: FlatTreeControlOptions<T, K>

trackBy: (dataNode: T) => K

Returns the identifier by which a dataNode should be tracked, should its reference change.

Similar to trackBy for *ngFor
方法
collapse

Collapses one single data node.

参数

Parameters

dataNode

T
collapseAll

Collapse all dataNodes in the tree.
collapseDescendants

Collapses a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T
expand

Expands one single data node.

参数

Parameters

dataNode

T
expandAll

Expands all data nodes in the tree.

To make this working, the dataNodes variable of the TreeControl must be set to all flattened data nodes of the tree.
expandDescendants

Expands a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T
getDescendants

Gets a list of the data node's subtree of descendent data nodes.

To make this working, the dataNodes of the TreeControl must be flattened tree nodes with correct levels.

参数

Parameters

dataNode

T

返回值

Returns
T[]
isExpanded

Whether a given data node is expanded or not. Returns true if the data node is expanded.

参数

Parameters

dataNode

T

返回值

Returns
boolean
toggle

Toggles one single data node's expanded/collapsed state.

参数

Parameters

dataNode

T
toggleDescendants

Toggles a subtree rooted at node recursively.

参数

Parameters

dataNode

T

Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type.

属性
名称 描述

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<K>

A selection model with multi-selection to track expansion status.

getChildren: (dataNode: T) => (Observable<T[]> | T[] | undefined | null)

getLevel: (dataNode: T) => number

Get depth of a given data node, return the level number. This is for flat tree node.

isExpandable: (dataNode: T) => boolean

Whether the data node is expandable. Returns true if expandable. This is for flat tree node.

options: NestedTreeControlOptions<T, K>

trackBy: (dataNode: T) => K

Returns the identifier by which a dataNode should be tracked, should its reference change.

Similar to trackBy for *ngFor
方法
collapse

Collapses one single data node.

参数

Parameters

dataNode

T
collapseAll

Collapse all dataNodes in the tree.
collapseDescendants

Collapses a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T
expand

Expands one single data node.

参数

Parameters

dataNode

T
expandAll

Expands all dataNodes in the tree.

To make this working, the dataNodes variable of the TreeControl must be set to all root level data nodes of the tree.
expandDescendants

Expands a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T
getDescendants

Gets a list of descendant dataNodes of a subtree rooted at given data node recursively.

参数

Parameters

dataNode

T

返回值

Returns
T[]
isExpanded

Whether a given data node is expanded or not. Returns true if the data node is expanded.

参数

Parameters

dataNode

T

返回值

Returns
boolean
toggle

Toggles one single data node's expanded/collapsed state.

参数

Parameters

dataNode

T
toggleDescendants

Toggles a subtree rooted at node recursively.

参数

Parameters

dataNode

T

提供给树节点组件的上下文。

Context provided to the tree node component.

属性
名称 描述

$implicit: T

该节点的数据。

Data for the node.

count: number

所有数据节点的长度。

Length of the number of total dataNodes.

index: number

该节点的索引位置。

Index location of the node.

level: number

该节点的深度。

Depth of the node.

Optional set of configuration that can be provided to the FlatTreeControl.

属性
名称 描述

trackBy: (dataNode: T) => K

Optional set of configuration that can be provided to the NestedTreeControl.

属性
名称 描述

trackBy: (dataNode: T) => K

Tree control interface. User can implement TreeControl to expand/collapse dataNodes in the tree. The CDKTree will use this TreeControl to expand/collapse a node. User can also use it outside the <cdk-tree> to control the expansion status of the tree.

属性
名称 描述

dataNodes: T[]

The saved tree nodes data for expandAll action.

expansionModel: SelectionModel<K>

The expansion model

getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null

Gets a stream that emits whenever the given data node's children change.

getLevel: (dataNode: T) => number

Get depth of a given data node, return the level number. This is for flat tree node.

isExpandable: (dataNode: T) => boolean

Whether the data node is expandable. Returns true if expandable. This is for flat tree node.
方法
collapse

Collapse one data node

参数

Parameters

dataNode

T
collapseAll

Collapse all the dataNodes in the tree
collapseDescendants

Collapse a data node and all its descendants

参数

Parameters

dataNode

T
expand

Expand one data node

参数

Parameters

dataNode

T
expandAll

Expand all the dataNodes in the tree
expandDescendants

Expand a data node and all its descendants

参数

Parameters

dataNode

T
getDescendants

Get all descendants of a data node

参数

Parameters

dataNode

T

返回值

Returns
any[]
isExpanded

Whether the data node is expanded or collapsed. Return true if it's expanded.

参数

Parameters

dataNode

T

返回值

Returns
boolean
toggle

Expand or collapse data node

参数

Parameters

dataNode

T
toggleDescendants

Toggle a data node by expand/collapse it and all its descendants

参数

Parameters

dataNode

T
树 API 目录