Estoy tratando de construir dinámicamente un menú usando la biblioteca ng-zorro. El problema es que quiero renderizar submenús anidados usando ng-template recursivo, y recibo el error cuando intento usar la directiva nz-submenu dentro de ng-template. El error es NullInjectorError: No provider for MenuService! Aquí está la demostración: https://stackblitz.com/edit/angular-ojfbuo-ktddi3?file=src/app/app.component.ts .
¿Alguien se ha encontrado con un problema de este tipo y ha podido solucionarlo?
Tienes que mover ngTemplate dentro del primer ngContainer ese menú existe stackblitz fijo
@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: [] }] }, ], }, ]; }