使用 ng-zorro 构建动态菜单答案

【问题标题】：Build dynamic menu using ng-zorro使用 ng-zorro 构建动态菜单
【发布时间】：2022-01-18 17:18:21
【问题描述】：

我正在尝试使用 ng-zorro 库动态构建菜单。问题是我想使用递归 ng-template 呈现嵌套的子菜单，并且在尝试使用 ng-template 中的 nz-submenu 指令时出现错误。错误是NullInjectorError: No provider for MenuService! 这是演示：https://stackblitz.com/edit/angular-ojfbuo-ktddi3?file=src/app/app.component.ts。

有没有人遇到过这样的问题并且能够解决它？

【问题讨论】：

标签： angular antd ng-zorro-antd

【解决方案1】：

您必须将 ngTemplate 移动到该菜单存在的第一个 ngContainer 内 fixed stackblitz

@Component({
  selector: 'nz-demo-menu-horizontal',
  template: `
    <ul nz-menu nzMode="inline">
      <ng-container *ngFor="let menu of menus">
      <ng-container *ngTemplateOutlet="recursiveListTmpl; context: { menu: menu }"></ng-container>
      <ng-template #recursiveListTmpl let-menu="menu">
        <li
            *ngIf="menu.children && menu.children.length > 0"
            nz-submenu
        >
          {{menu.title}} 
          <ng-container *ngTemplateOutlet="recursiveListTmpl; context: { menu: menu.children }"></ng-container>
        </li>
    </ng-template>
    <li *ngIf="!menu.children || menu.children.length==0" nz-menu-item>
      {{menu.title}}
    </li>
      </ng-container>
  </ul>
  `,
})
export class NzDemoMenuHorizontalComponent {
  menus = [
    { title: 'test', children: [] },
    {
      title: 'with children',
      children: [
        { title: 'child', children: [{ title: 'child 2', children: [] }] },
      ],
    },
  ];
}

【讨论】：