Angular CDK tree API 参考

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

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

选择器： cdk-nested-tree-node

Exported as: cdkNestedTreeNode
属性
名称 描述

data: T

树节点的数据。

isExpanded: boolean

level: number

nodeOutlet: QueryList<CdkTreeNodeOutlet>

子节点的占位符。
@Input()
Deprecated

role: 'treeitem' | 'group'

树节点的角色是什么。
方法
focus

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

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

子节点 ?

T[]

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

选择器： [cdkTreeNodeDef]

属性
名称 描述
@Input(cdkTreeNodeDefWhen)

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

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

template: TemplateRef<any>

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

选择器： [cdkTreeNodePadding]

属性
名称 描述
@Input('cdkTreeNodePaddingIndent')

indent: number | string

每个级别的缩进。可以是数字或 CSS 字符串。默认值为 40px，来自 Material Design 菜单中的子菜单规范。
@Input({ alias: 'cdkTreeNodePadding', transform: numberAttribute })

level: number

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

indentUnits: 'px'

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

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

选择器： [cdkTreeNodeOutlet]

属性
名称 描述

viewContainer: ViewContainerRef

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

选择器： cdk-tree

Exported as: cdkTree
属性
名称 描述
@Input()

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

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

trackBy: TrackByFunction<T>

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

treeControl: TreeControl<T, K>

树控制器

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

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

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

nodeData

T

index

number

viewContainer（可选）

ViewContainerRef

parentData（可选）

T

renderNodeChanges

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

data

readonly T[]

dataDiffer

IterableDiffer<T> = this._dataDiffer

viewContainer

ViewContainerRef = this._nodeOutlet.viewContainer

parentData（可选）

T

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

选择器： cdk-tree-node

Exported as: cdkTreeNode
属性
名称 描述

data: T

树节点的数据。

isExpanded: boolean

level: number

static mostRecentTreeNode: CdkTreeNode<any> | null

最近创建的 CdkTreeNode。我们把它保存在静态变量中，这样我们就可以在 CdkTree 中检索它并把数据设置成它。
@Input()
Deprecated

role: 'treeitem' | 'group'

树节点的角色是什么。
方法
focus

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

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

选择器： [cdkTreeNodeToggle]

属性
名称 描述
@Input({ alias: 'cdkTreeNodeToggleRecursive', transform: booleanAttribute })

recursive: boolean

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

基本树控件。它在单个数据节点上具有基本的切换/展开/折叠操作。

属性
名称 描述

dataNodes: T[]

已保存的数据节点，以执行 expandAll 动作。

expansionModel: SelectionModel<K>

具有多选功能以跟踪展开状态的选择模型。

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

获取在给定数据节点的子代发生更改时会发出事件的流。

getLevel: (dataNode: T) => number

获取给定数据节点的深度，返回其级别数字。这是用于扁平树节点的。

isExpandable: (dataNode: T) => boolean

数据节点是否可展开。如果可展开，则返回 true。这是用于扁平树节点的。

trackBy: (dataNode: T) => K

返回要更改其引用的标识符，该标识符应用来跟踪 dataNode。

与* ngFor 的 trackBy 相似
方法
collapse

折叠一个数据节点。
参数

dataNode

T

collapseAll

折叠此树中的所有 dataNode。
collapseDescendants

递归折叠以给定数据节点为根的子树。
参数

dataNode

T

expand

展开一个数据节点。
参数

dataNode

T

expandAll

展开树中的所有数据节点。
expandDescendants

递归展开以给定数据节点为根的子树。
参数

dataNode

T

getDescendants

递归获取以给定数据节点为根的子树的后代数据节点的列表。
参数

dataNode

T

返回值
T[]

isExpanded

给定数据节点是否已展开。如果数据节点已展开，则返回 true。
参数

dataNode

T

返回值
boolean

toggle

切换一个数据节点的展开/折叠状态。
参数

dataNode

T

toggleDescendants

递归切换以 node 为根的子树。
参数

dataNode

T

扁平树控件。能够对扁平树中的子树进行递归地展开/折叠。

属性
名称 描述

dataNodes: T[]

已保存的数据节点，以执行 expandAll 动作。

expansionModel: SelectionModel<K>

具有多选功能以跟踪展开状态的选择模型。

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

获取在给定数据节点的子代发生更改时会发出事件的流。

getLevel: (dataNode: T) => number

isExpandable: (dataNode: T) => boolean

options: FlatTreeControlOptions<T, K>

trackBy: (dataNode: T) => K

返回要更改其引用的标识符，该标识符应用来跟踪 dataNode。

与* ngFor 的 trackBy 相似
方法
collapse

折叠一个数据节点。
参数

dataNode

T

collapseAll

折叠此树中的所有 dataNode。
collapseDescendants

递归折叠以给定数据节点为根的子树。
参数

dataNode

T

expand

展开一个数据节点。
参数

dataNode

T

expandAll

展开树中的所有数据节点。

为了使它起作用，dataNodes 变量必须设置为树的所有扁平化的数据节点。
expandDescendants

递归展开以给定数据节点为根的子树。
参数

dataNode

T

getDescendants

获取后代数据节点的数据节点子树的列表。

为了使它工作正常，dataNodes 节点必须展平为具有正确级别的树节点。
参数

dataNode

T

返回值
T[]

isExpanded

给定数据节点是否已展开。如果数据节点已展开，则返回 true。
参数

dataNode

T

返回值
boolean

toggle

切换一个数据节点的展开/折叠状态。
参数

dataNode

T

toggleDescendants

递归切换以 node 为根的子树。
参数

dataNode

T

嵌套树控件。能够递归地扩展/折叠 NestedNode 类型的子树。

属性
名称 描述

dataNodes: T[]

已保存的数据节点，以执行 expandAll 动作。

expansionModel: SelectionModel<K>

具有多选功能以跟踪展开状态的选择模型。

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

getLevel: (dataNode: T) => number

获取给定数据节点的深度，返回其级别数字。这是用于扁平树节点的。

isExpandable: (dataNode: T) => boolean

数据节点是否可展开。如果可展开，则返回 true。这是用于扁平树节点的。

options: NestedTreeControlOptions<T, K>

trackBy: (dataNode: T) => K

返回要更改其引用的标识符，该标识符应用来跟踪 dataNode。

与* ngFor 的 trackBy 相似
方法
collapse

折叠一个数据节点。
参数

dataNode

T

collapseAll

折叠此树中的所有 dataNode。
collapseDescendants

递归折叠以给定数据节点为根的子树。
参数

dataNode

T

expand

展开一个数据节点。
参数

dataNode

T

expandAll

展开树中的所有 dataNodes。

为了使它起作用，dataNodes 变量必须设置为树的所有根级数据节点。
expandDescendants

递归展开以给定数据节点为根的子树。
参数

dataNode

T

getDescendants

递归获取以给定数据节点为根的子树的后代 dataNode 列表。
参数

dataNode

T

返回值
T[]

isExpanded

给定数据节点是否已展开。如果数据节点已展开，则返回 true。
参数

dataNode

T

返回值
boolean

toggle

切换一个数据节点的展开/折叠状态。
参数

dataNode

T

toggleDescendants

递归切换以 node 为根的子树。
参数

dataNode

T

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

属性
名称 描述

$implicit: T

该节点的数据。

count: number

所有数据节点的长度。

index: number

该节点的索引位置。

level: number

该节点的深度。

可以提供给 FlatTreeControl 的一组可选配置。

属性
名称 描述

trackBy: (dataNode: T) => K

可以提供给 NestedTreeControl 的一组可选配置。

属性
名称 描述

trackBy: (dataNode: T) => K

树控件接口。用户可以实现 TreeControl 来展开/折叠树中的 dataNodes。CDKTree 将使用此 TreeControl 来展开/折叠节点。用户还可以在 <cdk-tree> 之外使用它来控制树的展开状态。

属性
名称 描述

dataNodes: T[]

保存的树节点数据可用于 expandAll 动作。

expansionModel: SelectionModel<K>

展开模型

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

获取在给定数据节点的子代发生更改时会发出事件的流。

getLevel: (dataNode: T) => number

获取给定数据节点的深度，返回其级别数字。这是用于扁平树节点的。

isExpandable: (dataNode: T) => boolean

数据节点是否可展开。如果可展开，则返回 true。这是用于扁平树节点的。
方法
collapse

折叠一个数据节点
参数

dataNode

T

collapseAll

折叠树中的所有 dataNode
collapseDescendants

折叠数据节点及其所有后代
参数

dataNode

T

expand

展开一个数据节点
参数

dataNode

T

expandAll

展开树中的所有 dataNode
expandDescendants

展开数据节点及其所有后代
参数

dataNode

T

getDescendants

获取数据节点的所有后代
参数

dataNode

T

返回值
any[]

isExpanded

数据节点是展开还是折叠。如果已展开，则返回 true。
参数

dataNode

T

返回值
boolean

toggle

展开或折叠数据节点
参数

dataNode

T

toggleDescendants

通过展开/折叠数据节点及其所有后代来切换数据节点
参数

dataNode

T