Angular 动态渲染树形结构

在前端开发中，树形结构是一个常见的 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 组件：

// javascriptcn.com 代码示例
@Component({
  selector: 'app-root',
  template: '<app-menu [items]="menuItems"></app-menu>'
})
export class AppComponent {
  menuItems: MenuItem[] = [
    {
      id: 1,
      name: '菜单1',
      children: [
        {
          id: 2,
          name: '子菜单1',
          children: [
            {
              id: 3,
              name: '子子菜单1'
            },
            {
              id: 4,
              name: '子子菜单2'
            }
          ]
        },
        {
          id: 5,
          name: '子菜单2'
        }
      ]
    },
    {
      id: 6,
      name: '菜单2',
      children: [
        {
          id: 7,
          name: '子菜单3'
        }
      ]
    }
  ];
}

在 AppComponent 中，我们定义了一个 menuItems 数组，用来存储多级菜单数据。然后，我们在模板中使用 app-menu 组件，并将 menuItems 数组传递给 items 属性，完成多级菜单的渲染。

总结

本文介绍了如何使用 Angular 实现动态渲染树形结构，以多级菜单为例。我们使用递归组件来渲染树形结构，并提供了示例代码。在实际开发中，我们可以根据需要修改代码，以满足不同的需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e749d95b1f8cacd799bfc