简介
mizi-ngx-treeview 是一个基于 Angular 框架开发的树形菜单组件，可以方便地构建树形结构，支持多级嵌套、节点的展开和收缩以及标记和高亮等功能。本文将详细介绍如何使用这个 npm 包。
安装
使用 npm 安装 mizi-ngx-treeview：
npm install mizi-ngx-treeview --save
使用
引入 mizi-ngx-treeview 模块：
在需要使用树形菜单的模块中，引入 mizi-ngx-treeview 模块：
import { MiziNgxTreeviewModule } from 'mizi-ngx-treeview'; @NgModule({ imports: [ MiziNgxTreeviewModule ] }) export class AppModule { }构建数据源：
数据源是树形菜单的核心，必须满足以下格式：
interface TreeItem { id: string; // 必须是字符串类型 name: string; children?: TreeItem[]; }数据源可以通过后端 API、静态 JSON 文件或手动定义等方式获取或定义。
在模板中使用：
在模板中，创建一个
<ngx-treeview>元素，并通过输入属性data绑定数据源：<ngx-treeview [data]="treeData"></ngx-treeview>
这样，就可以看到树形菜单的效果了。
监听选择事件：
如果需要监听用户选择节点的事件，可以使用
nodeSelected事件：<ngx-treeview [data]="treeData" (nodeSelected)="onNodeSelected($event)"></ngx-treeview>
然后在组件的代码中定义
onNodeSelected方法：onNodeSelected(node: TreeItem) { console.log('选中的节点是：', node); }这样，当用户选择了某个节点时，就会调用
onNodeSelected方法并传入选中的节点。
高级用法
除了基本的使用方式，mizi-ngx-treeview 还提供了一些高级用法，可以实现更复杂的场景需求。
标记节点
在数据源中，为需要标记的节点添加 marked: boolean 属性，然后在模板中设置样式即可：
<ngx-treeview [data]="treeData">
<ng-template ngx-treeview-node let-node>
<span [class.marked]="node.marked">{{ node.name }}</span>
</ng-template>
</ngx-treeview>展开/收缩节点
在节点上添加 expanded: boolean 属性，然后在模板中设置属性即可：
<ngx-treeview [data]="treeData">
<ng-template ngx-treeview-node let-node>
<span (click)="node.expanded = !node.expanded">{{ node.name }}</span>
<ul *ngIf="node.expanded">
<li *ngFor="let child of node.children" ngx-treeview-node [node]="child"></li>
</ul>
</ng-template>
</ngx-treeview>高亮匹配节点
先定义一个过滤条件和一个过滤函数：
-- -------------------- ---- -------
----- ---------- - ----------
-------- ----------------- ----------- ------- -------- ---------- -
------ ----------------------------- ----- -- -
----- -------- - ------------------------- -- --- --------
-- --------------------------- -- ---------------- -
----------
--------
--------- --------------- - -------- - ---------
---
-
------ ----
-- ----
-然后在模板中，根据过滤条件重新生成数据源即可：
-- -------------------- ---- -------
------ ----------- -------------------- --
------------- ----------------------------- ---------
------------ ----------------- ---------
----- ------------------------------------------------- --------- ---------
--- ----------------------
--- ----------- ----- -- -------------- ----------------- --------------------
-----
--------------
---------------示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
--------- -------- -
--- -------
----- -------
---------- -----------
-
----- ---------- ---------- - -
-
--- ----
----- ----- ---
--------- -
-
--- -----
----- ------ ---- ----
--
-
--- -----
----- ------ ---- -----
--------- -
-
--- ------
----- ----------- ---- ------
--
-
--- ------
----- ----------- ---- ------
-
-
--
-
--- -----
----- ------ ---- -----
--------- -
-
--- ------
----- ----------- ---- ------
--
-
--- ------
----- ----------- ---- -------
--------- -
-
--- -------
----- ---------------- ---- --------
--
-
--- -------
----- ---------------- ---- --------
-
-
-
-
-
-
--
-
--- ----
----- ----- ---
--------- -
-
--- -----
----- ------ ---- ----
--
-
--- -----
----- ------ ---- -----
--------- -
-
--- ------
----- ----------- ---- ------
--
-
--- ------
----- ----------- ---- ------
-
-
-
-
-
--
------------
--------- -----------
--------- -
------ ----------- -------------------- --
------------- ----------------------------- -------- ----------------------------------------
------------ ----------------- ---------
----- ---------------------------- ---------------------------------------------------------------------------
-- --------- --
-------
--- ----------------------
--- ----------- ----- -- -------------- ----------------- --------------------
-----
--------------
---------------
--
------- -
-
----- -
-------- ------
------- -----
------------ -----------
-
----- -
-------- ------
------ -----
-------------- -----
---------- -----
-------- -------
-------------- -------
------- -----
-
------- -
------------ -----
-
---------- -
----------------- -------
-
-
-
--
------ ----- ------------ -
------ - ---
-------- - ----------
----------------- ----------- ------- -------- ---------- -
------ ----------------------------- ----- -- -
----- -------- - ------------------------------ -- --- --------
-- ------------------------------------------------------- -- ---------------- -
----------
--------
--------- --------------- - -------- - ----------
------- ----
---
-
------ ----
-- ----
-
-------------------- --------- -
--------------------- ------- ------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568a381e8991b448e47ea