使用 ng-zorro 构建动态菜单

Posted 2023-02-18

【中文标题】使用 ng-zorro 构建动态菜单

【英文标题】：Build dynamic menu using 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。

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

【参考方案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: [] ] ,
      ],
    ,
  ];