在前端开发中，树形结构是一个常见的 UI 组件，例如多级菜单、树形列表等。在 Angular 中，我们可以使用递归组件来动态渲染树形结构。本文将介绍如何使用 Angular 实现动态渲染树形结构，并提供示例代码。
动态渲染多级菜单
假设我们有一个多级菜单，每个菜单项包含以下属性：
interface MenuItem {
id: number;
name: string;
children?: MenuItem[];
}其中，id 表示菜单项的唯一标识，name 表示菜单项的名称，children 表示当前菜单项的子菜单项。如果一个菜单项没有子菜单项，则 children 属性为 undefined。
我们可以使用递归组件来动态渲染多级菜单。首先，我们定义一个组件 menu-item，用来渲染单个菜单项：
<ng-container *ngIf="item">
<a [routerLink]="item.link">{{ item.name }}</a>
<ul *ngIf="item.children">
<li *ngFor="let child of item.children">
<app-menu-item [item]="child"></app-menu-item>
</li>
</ul>
</ng-container>在组件中，我们使用 *ngIf 来判断当前菜单项是否存在，如果存在则渲染菜单项的名称和子菜单项。如果当前菜单项有子菜单项，则使用 *ngFor 循环渲染子菜单项，并递归调用 menu-item 组件。
接下来，我们定义一个组件 menu，用来渲染多级菜单：
<ul>
<li *ngFor="let item of items">
<app-menu-item [item]="item"></app-menu-item>
</li>
</ul>在组件中，我们使用 *ngFor 循环渲染顶级菜单项，并调用 menu-item 组件来渲染每个菜单项及其子菜单项。
最后，我们定义一个 AppComponent，用来加载多级菜单数据并渲染 menu 组件：
-- -------------------- ---- -------
------------
--------- -----------
--------- ---------- --------------------------------
--
------ ----- ------------ -
---------- ---------- - -
-
--- --
----- ------
--------- -
-
--- --
----- -------
--------- -
-
--- --
----- -------
--
-
--- --
----- -------
-
-
--
-
--- --
----- ------
-
-
--
-
--- --
----- ------
--------- -
-
--- --
----- ------
-
-
-
--
-在 AppComponent 中，我们定义了一个 menuItems 数组，用来存储多级菜单数据。然后，我们在模板中使用 app-menu 组件，并将 menuItems 数组传递给 items 属性，完成多级菜单的渲染。
总结
本文介绍了如何使用 Angular 实现动态渲染树形结构，以多级菜单为例。我们使用递归组件来渲染树形结构，并提供了示例代码。在实际开发中，我们可以根据需要修改代码，以满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e749d95b1f8cacd799bfc