0
162
VisualizaçõesRenderizar etiquetas ng-zorro desde el componente
Estoy tratando de renderizar un <li> con algunas etiquetas ng-zorro, intento con innerHTML pero cuando entro a la página esto falla, quiero mostrar diferentes menús si el usuario ingresa a una aplicación específica (ruta)
Tengo mi JSON así
menuApp = [ { "app": "requerimientos", 'menu': '\ <li nz-menu-item nzMatchRouter>\ <a routerLink="/applications/dashboard/requerimientos/crear-pedido">Crear pedido</a>\ </li>\ <li nz-menu-item nzMatchRouter>\ <a routerLink="/applications/dashboard/requerimientos/verificar-pedido">Verificar pedido</a>\ </li>\ ' } ]y en mi HTML
<li nz-submenu nzOpen nzTitle="Menú {{activeChild}}" nzIcon="appstore" *ngIf="activeChild != ''"> <div *ngFor="let app of menuApp; index as i"> <ul *ngIf="app.app === activeChild"> <div [innerHTML]="app.menu"></div> </ul> </div> </li> pero cuando renderizo la página, <li> imprime sin ninguna etiqueta o clase ng-zorro
Espero que alguien pueda ayudarme
1 Respostas
Responde à pergunta0
Angular no funciona de esa manera. Las directivas personalizadas (como nzMatchRouter) no se pueden calzar con un HTML interno. Debe indicar al analizador que compile el HTML después de agregarlo. Pero aún así, existen métodos centrados en ángulos más eficientes que puede usar, como mantener su menú como una matriz simple de valores de texto/url y usar *ngFor para iterarlos. De esa manera, las directivas <li> se compilan en tiempo de ejecución
menuApp = [ { "app": "requerimientos", 'menu': [ {text: "Crear pedido", url: "/applications/dashboard/requerimientos/crear-pedido" }, {text: "Verificar pedido", url: "/applications/dashboard/requerimientos/verificar-pedido" } ]}Entonces tu HTML sería como
<li nz-submenu nzOpen nzTitle="Menú {{activeChild}}" nzIcon="appstore" *ngIf="activeChild != ''"> <div *ngFor="let app of menuApp; index as i"> <ul *ngIf="app.app === activeChild"> <li *ngFor="item in app.menu" nz-menu-item nzMatchRouter> <a [routerLink]="item.url">{{item.text}}</a> </li> </ul> </div> </li>