今天尝试通过 ng-template 加 ngTemplateOutlet实现一个递归的菜单。但是遇到一个问题:NullInjectorError: No provider for NzMenuDirective!
即zerro的指令找不到。如果把zerro的指令去掉就可以正常显示。原以为是zerro的模块没导入,但是尝试不用ng-template,而是直接写‘nz-menu-item’就可以成功显示zerro的菜单。
最终得出结论,zerro和ngTemplateOutlet不能结合使用。递归应该用组件,不应该用ngTemplateOutlet
参考:
https://github.com/NG-ZORRO/ng-zorro-antd/issues/3490#issuecomment-495630765
https://github.com/angular/angular/issues/14842
<ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menus}"></ng-container> <ng-template #menuItemNode let-theMenus="menus_"> <ng-container *ngFor='let menu of theMenus'> <li *ngIf='menu.childrens.length==0' nz-menu-item> <span title> <i type="mail"></i> <span>{{menu.resourceName}}</span> </span> </li> <li *ngIf='menu.childrens.length!=0'> <span title> <i type="appstore"></i> <span>{{menu.resourceName}}</span> </span> <ul style="padding-left: 5px"> <ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menu.childrens}"></ng-container> </ul> </li> </ng-container> </ng-template>