从组件渲染 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。但即使如此，您仍然可以使用更高效的 angular-centric 方法 - 例如将菜单保存为 text/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>

从组件渲染 ng-zorro 标签

Render ng-zorro tags from component

javascript

angular

ng-zorro-antd