從組件渲染 ng-zorro 標簽

Question

我正在嘗試使用一些 ng-zorro 標簽呈現<li> ，我嘗試使用innerHTML但是當我進入頁面失敗時，如果用戶進入特定應用程序（路由），我想顯示不同的菜單

我有這樣的 JSON

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>\
      '
    }
  ]

在我的 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>

但是當我渲染頁面時<li>打印沒有任何 ng-zorro 標簽或 class

希望可以有人幫幫我

Answer 1

Angular 不能那樣工作。 自定義指令（如 nzMatchRouter）不能用 innerHTML 硬塞進去。 您必須指示解析器在添加 HTML 后對其進行編譯。 但即便如此，您還可以使用更高效、以角度為中心的方法——比如將菜單保留為簡單的文本/url 值數組，並使用*ngFor對其進行迭代。 這樣<li>指令在運行時編譯

menuApp = [
    {
      "app": "requerimientos",
      'menu': [
         {text: "Crear pedido", url: "/applications/dashboard/requerimientos/crear-pedido" },
         {text: "Verificar pedido", url: "/applications/dashboard/requerimientos/verificar-pedido" }
    ]}

那么你的 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">
            <li *ngFor="item in app.menu" nz-menu-item nzMatchRouter> 
                <a [routerLink]="item.url">{{item.text}}</a>
            </li>
        </ul>
    </div>
</li>