在 Angular 中，CDKTree 是用于构建树形结构的组件之一。它使用了 Angular CDK（Component Dev Kit）中的虚拟滚动技术来优化性能，支持大量数据的渲染，而且易于自定义样式和交互。
安装和导入
首先，我们需要安装 @angular/cdk 和 @angular/material 依赖：
npm install --save @angular/cdk @angular/material
然后，在你的模块中导入 MatTreeModule 和 MatIconModule：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
-----------
-------- -
--------------
--------------
-- ----- -------
--
-- ----- ------------
--
------ ----- ---------- - -数据源和节点定义
CDKTree 的核心是数据源和节点定义。数据源是树形结构数据的来源，而节点定义则决定了每个节点的展示方式和行为。
数据源
数据源必须实现 DataSource 接口，并提供两个方法：connect 和 disconnect。下面是一个简单的数据源示例：
-- -------------------- ---- -------
------ - ---------------- ---------- - ---- -------
------ --------- -------- -
--- -------
----- -------
---------- -----------
-
------ ----- ------------ -
---------- - --- --------------------------------
--- ------- ---------- - ------ ---------------------- -
--- ----------- ----------- -
----------------------------
-
---------- ---------------------- -
------ ----------------
-
------------ --
-这个数据源包含了一个 dataChange 主题，当数据源的 data 属性被更改时，主题会发送新的值。connect 方法返回一个观测者对象，它会在树形结构需要更新时被调用。
节点定义
节点定义是一个 Angular 组件，它必须实现 MatTreeNodeDef 指令和 MatTreeNode 组件，并提供其自己的上下文数据。下面是一个简单的节点定义示例：
-- -------------------- ---- -------
------------- ----------------------------
---------------
----
---- ------ ---
------- --------------- ------------------
-------------
-----
----------------
---------------这个节点定义包含了一个 ng-container 盒子，它定义了节点的选择器 myTreeItem，以及一个 li 标签，它包含了节点的样式。其中 {{node.name}} 是节点的名称，它来自于节点数据模型中的一个属性。
构建树形结构
有了数据源和节点定义，我们就可以构建树形结构了。下面是一个完整的示例：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------------- ---------------- - ---- -------------------------
------ - ---------------- ---------- - ---- -------
------ --------- -------- -
--- -------
----- -------
---------- -----------
-
------ ----- ------------ -
---------- - --- --------------------------------
--- ------- ---------- - ------ ---------------------- -
--- ----------- ----------- -
----------------------------
-
---------- ---------------------- -
------ ----------------
-
------------ --
-
------------
--------- --------------
--------- -
--------- ------------------------- ----------------------------
-------------- -------------------- ----- -------------------
------- --------------- ------------------
-------------
----------------
-------------- -------------------- ---------- --------- -------------------
------- --------------- ----------------- -------------------------- - - -----------
---------------------------------------- - ------------- - ----------------------------
---------
-------------
----------------
-----------
--
--
------ ----- --------------- ---------- ------ -
----------- --------------------------------
----------- - --- -------------------------------- -- ----------- ---- -- -----------------
------- ----------- - ------ --------- ------ ------- -- -
------ -
--- --------
----- ----------
------ ------
----------- ----------------
-
-
------- ----------- - ------ --------- ------ ------- -- -
----- -------- - ---------------------- -------
----------------------------------- ----- - --
------------------ -- -------------------------------------
------ ---------
-
------- --------------- - ---------- ----------- ------ ------- -- -
------ -------- - ------------------ -- ----------------------- ------- - ---
-
------- --------------- ------------ - ---
------- ------------- - --- ---------------------------------- ---- -- ----------- ---- -- ---------------- ---- -- ---------------
------------------- ----------- ------------- --
---------- -
-- -----
----- --------- -------- - ---- -- ----- ------- --------- -
---- -- ----- --------- --------- -
---- -- ----- -----------------
---- -- ----- ----------------
---
---- -- ----- ----------
---- -- ----- --------- --------- -
---- -- ----- -----------------
--
---
----- ------------- - -------------------------- ---
-------------------- - ----------------
--------------- - --- --------------------------------------- --------------------
-------------------- - --------------------
-
----------- ------- ----- ----------- -
------ ----------------
-
-这个组件中包含了以下几个部分：
MyDataSource：数据源。MyTreeComponent：树形结构组件，包含了节点定义和树形控制器。ngOnInit方法中，我们构建了一个简单的树形结构数据，并将其转化为平铺节点数组，然后将其传递给数据源的data属性，最后将数据源和树形结构控制器绑定到mat-tree组件。hasChild：判断一个节点是否有子节点，用于决定是否展开该节点。
总结
CDKTree 是 Angular 中构建树形结构的强大组件之一。通过实现数据源和节点定义，我们可以快速构建自己需要的树形结构，并优化渲染性能。在实际开发中，我们可以根据需求自定义节点的样式和交互行为，从而实现更好的用户体验。
参考资料
示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c7594968c7c53b0b6e5f6