Angular Material

Angular Material tree API 参考文档

import {MatTreeModule} from '@angular/material/tree';

指令

`MatTreeNode`

带有 Material Design 样式的 CdkTree 节点的包装器。

Wrapper for the CdkTree node with Material design styles.

选择器： mat-tree-node

导出为： matTreeNode

属性

名称	描述
@Input() `disabled: boolean`	Whether the component is disabled.
`data: T`	树节点的数据。 The tree node's data.
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.
`isExpanded: boolean`
`level: number`
@Input() 已弃用 `role: 'treeitem' \| 'group'`	树节点的角色是什么。 The role of the tree node.

方法

focus
让此菜单项获得焦点。是对 FocusableOption 的实现。 Focuses the menu item. Implements for FocusableOption.

focus

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

Focuses the menu item. Implements for FocusableOption.

`MatTreeNodeDef` extends CdkTreeNodeDef

具有 Material Design 样式的 CdkTree 节点定义的包装器。保存该节点的模板和一个 when 谓词，用于描述何时该使用此节点。

Wrapper for the CdkTree node definition with Material design styles. Captures the node's template and a when predicate that describes when this node should be used.

选择器： [matTreeNodeDef]

属性

名称描述

名称	描述
@Input('matTreeNode') `data: T`
@Input( matTreeNodeDefWhen) `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>`

@Input('matTreeNode')

data: T

@Input( matTreeNodeDefWhen)

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>

`MatNestedTreeNode` extends CdkNestedTreeNode

具有 Material Design 样式的 CdkTree 嵌套节点的包装器。

Wrapper for the CdkTree nested node with Material design styles.

选择器： mat-nested-tree-node

导出为： matNestedTreeNode

属性

名称	描述
@Input() `disabled: any`	该节点是否被禁用。 Whether the node is disabled.
@Input('matNestedTreeNode') `node: T`
`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.

方法

focus
让此菜单项获得焦点。是对 FocusableOption 的实现。 Focuses the menu item. Implements for FocusableOption.

focus

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

Focuses the menu item. Implements for FocusableOption.

`MatTreeNodePadding` extends CdkTreeNodePadding

采用 Material Design 样式的 CdkTree 衬距包装器。

Wrapper for the CdkTree padding with Material design styles.

选择器： [matTreeNodePadding]

属性

名称描述

名称	描述
@Input('matTreeNodePaddingIndent') `indent: number \| string`	每个级别的缩进。默认值是 40px，来自 Material Design 菜单中的子菜单规范。 The indent for each level. Default number 40px from material design menu sub-menu spec.
@Input('matTreeNodePadding') `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.

@Input('matTreeNodePaddingIndent')

indent: number | string

每个级别的缩进。默认值是 40px，来自 Material Design 菜单中的子菜单规范。

The indent for each level. Default number 40px from material design menu sub-menu spec.

@Input('matTreeNodePadding')

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.

`MatTree` extends CdkTree

采用 Material Design 样式的 CdkTree 封装器。

Wrapper for the CdkTable with Material design styles.

选择器： mat-tree

导出为： matTree

属性

名称	描述
@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 `T[] \| readonly T[]`
dataDiffer `IterableDiffer<T> = this._dataDiffer`
viewContainer `ViewContainerRef = this._nodeOutlet.viewContainer`
parentData? `T`

`MatTreeNodeToggle` extends CdkTreeNodeToggle

供 CdkTree 用于切换的带有 Material Design 样式的包装器。

Wrapper for the CdkTree's toggle with Material design styles.

选择器： [matTreeNodeToggle]

属性

名称	描述
@Input('matTreeNodeToggleRecursive') `recursive: boolean`

`MatTreeNodeOutlet`

嵌套的 CdkNode 出口地标。把 [matTreeNodeOutlet] 放在标签上，把子数据节点放到此出口地标中。

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

选择器： [matTreeNodeOutlet]

属性

名称	描述
`viewContainer: ViewContainerRef`

类

`MatTreeFlattener`

树展平器，用于将普通类型的节点转换为具有子级和级别信息的节点。把 T 型嵌套节点转换为 F 型扁平节点。

Tree flattener to convert a normal type of node to node with children & level information. Transform nested nodes of type T to flattened nodes of type F.

例如，类型为 T 的输入数据是嵌套的，并包含其子数据：

For example, the input data of type T is nested, and contains its children data:

SomeNode: { key: 'Fruits', children: [ NodeOne: { key: 'Apple', }, NodeTwo: { key: 'Pear', } ] }

当展平之后，其结构变为：

After flattener flatten the tree, the structure will become

SomeNode: { key: 'Fruits', expandable: true, level: 1 }, NodeOne: { key: 'Apple', expandable: false, level: 2 }, NodeTwo: { key: 'Pear', expandable: false, level: 2 }

and the output flattened type is F with additional information.

属性

名称	描述
`getChildren: (node: T) => Observable<T[]> \| T[] \| undefined \| null`
`getLevel: (node: F) => number`
`isExpandable: (node: F) => boolean`
`transformFunction: (node: T, level: number) => F`

方法

expandFlattenedNodes
根据当前展开状态展开已展平的节点。返回的列表长度可能不同。 Expand flattened node with current expansion status. The returned list may have different length.
参数 Parameters
nodes `F[]`
treeControl `TreeControl<F, K>`
返回值 Returns
`F[]`

flattenNodes
将节点类型为 T 的列表展平为节点类型为 F 的展平版本。请注意，类型 T 可能是嵌套的，而 `structuredData` 的长度可能与返回列表 `F[]` 的长度不同。 Flatten a list of node type T to flattened version of node F. Please note that type T may be nested, and the length of `structuredData` may be different from that of returned list `F[]`.
参数 Parameters
structuredData `T[]`
返回值 Returns
`F[]`

`MatTreeFlatDataSource` extends DataSource

扁平树的数据源。数据源需要处理树节点的展开/折叠，并将数据提更改为 MatTree。T 型的嵌套树节点由 MatTreeFlattener 展平，并转换为 F 型，供 MatTree 使用。

Data source for flat tree. The data source need to handle expansion/collapsion of the tree node and change the data feed to MatTree. The nested tree nodes of type T are flattened through MatTreeFlattener, and converted to type F for MatTree to consume.

属性

名称	描述
`data: T[]`

方法

connect
参数 Parameters
collectionViewer `CollectionViewer`
返回值 Returns
`Observable<F[]>`

disconnect

`MatTreeNestedDataSource` extends DataSource

嵌套树的数据源。

Data source for nested tree.

嵌套树的数据源不必考虑节点展平器，也不必考虑展开或折叠的方式。展开/折叠将由 TreeControl 和每个非叶节点处理。

The data source for nested tree doesn't have to consider node flattener, or the way to expand or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.

属性

名称描述

名称	描述
`data: T[]`	嵌套树的数据 Data for the nested tree

data: T[]

嵌套树的数据

Data for the nested tree

方法

connect
参数 Parameters
collectionViewer `CollectionViewer`
返回值 Returns
`Observable<T[]>`

disconnect

树 API 目录