如何在angular中制作递归菜单

ng generate component Menu

export interface MenuItem {
  label: string;
  children?: MenuItem[];
}

<!-- menu.component.html -->
<ul>
  <ng-template ngFor let-menuItem [ngForOf]="menuItems">
    <li>
      {{ menuItem.label }}
      <ng-container *ngIf="menuItem.children">
        <app-menu [menuItems]="menuItem.children"></app-menu>
      </ng-container>
    </li>
  </ng-template>
</ul>

import { Component, Input } from '@angular/core';
import { MenuItem } from './menu-item';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  @Input() menuItems: MenuItem[];
}

<!-- app.component.html -->
<app-menu [menuItems]="menuData"></app-menu>

import { Component } from '@angular/core';
import { MenuItem } from './menu-item';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  menuData: MenuItem[] = [
    {
      label: 'Menu Item 1',
      children: [
        {
          label: 'Submenu Item 1.1'
        },
        {
          label: 'Submenu Item 1.2',
          children: [
            {
              label: 'Submenu Item 1.2.1'
            },
            {
              label: 'Submenu Item 1.2.2'
            }
          ]
        }
      ]
    },
    {
      label: 'Menu Item 2'
    }
  ];
}