在Angular中创建动态级联菜单

export interface MenuItem {
  id: number;
  name: string;
  children?: MenuItem[];
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-menu',
  template: `
    <ul>
      <li *ngFor="let item of menuItems">
        {{ item.name }}
        <app-menu *ngIf="item.children" [menuItems]="item.children"></app-menu>
      </li>
    </ul>
  `,
})
export class MenuComponent {
  @Input() menuItems: MenuItem[];
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-menu [menuItems]="menuItems"></app-menu>
  `,
})
export class AppComponent {
  menuItems: MenuItem[] = [
    {
      id: 1,
      name: '菜单项1',
      children: [
        {
          id: 11,
          name: '子菜单项1.1',
        },
        {
          id: 12,
          name: '子菜单项1.2',
        },
      ],
    },
    {
      id: 2,
      name: '菜单项2',
    },
  ];
}