如何渲染嵌套的ng-template

Question

我有這樣的嵌套ng-template結構。

@Component({
  selector: 'my-app',
  template: `
    <list>
      <ng-template *ngFor="let item of Items" #ListItem>
        <ng-template #ListItemLine>{{ item[0] }}</ng-template>
        <ng-template #ListItemLine>{{ item[1] }}</ng-template>
        <ng-template #ListItemLine>{{ item[2] }}</ng-template>
        I can see this line, but can't get above templates
      </ng-template>
    </list>
  `,
})
export class App {
  Items: Array<Array<string>> = [
    [ "1-1", "1-2", "1-3", ],
    [ "2-1", "2-2", "2-3", ],
    [ "3-1", "3-2", "3-3", ],
    [ "4-1", "4-2", "4-3", ],
    [ "5-1", "5-2", "5-3", ],
  ]
}

如何在子ng-component中渲染子ng-component component：

@Component({
  selector: 'list',
  template: `
    <ul>
      <li *ngFor="let item of Items">
        <ng-container *ngTemplateOutlet="item"></ng-container>
      </li>
    </ul>
  `,
})
export class ListComponent {

  @ContentChildren('ListItem') public Items;

}

Plunkr https://plnkr.co/edit/Hi1ZqPAAYyIbclUuzRrl?p=預覽

先感謝您。

更新

最后，我想將Angular Material組件包裝到我的組件中，因此，如果我會找到比Material更好的UI，則不必更改程序中所有Material組件的准確性，我只需要更改我的實現即可包裝UI組件。

例如，讓我們嘗試包裝mat-list組件。 我需要為mat-list容器做一個包裝，我們稱之為my-list ：

@Component({
  selector: 'my-list',
  template: `
    <mat-list>
      <ng-content></ng-content>
    </mat-list>
  `,
})

和mat-list-item的包裝器：

@Component({
  selector: 'my-list-item',
  template: `
    <mat-list-item>
      <ng-content></ng-content>
    </mat-list>
  `,
})

HTML渲染結果將是：

• 我的列表
  • 墊名單
    • 我的列表項
      • 墊列表項
    • ...

我的包裝器包圍了每個Material組件，因此Material隨附的指令和樣式無效。

Answer 1

這是我根據您提供的信息解決此問題的方法。 正如您已經建議的那樣，我已將list和list-item組成了兩個部分。 列表組件基於輸入數組呈現list-item組件，並且列表組件的內容必須包含定義列表項模板的模板。 樣例代碼：

    @Component({
      selector: 'list',
      template: `
        <ul>
          <list-item *ngFor="let item of items" [data]="item" [itemTemplate]="itemTemplate"></list-item>
          <ng-content></ng-content>
        </ul>
      `,
    })
    export class ListComponent {
      @ContentChild(TemplateRef)
      public itemTemplate: TemplateRef;
      @Input()
      public items: any[];

    }

然后， list-item組件僅呈現容器元素中提供的列表項模板。 樣例代碼：

@Component({
  selector: 'list-item',
  template: `
      <li>
        <ng-container *ngTemplateOutlet="itemTemplate; itemContext"></ng-container>
      </li>
  `,
})
export class ListItemComponent {
  @Input()
  public data: any;
  @Input()
  public itemTemplate: Template;
  public get itemContext(): any {
    return { $implicit: data };
  }
}

然后，您可以以不同的方式使用它。 我舉了一個例子，只是一個簡單的列表，另一個是項目模板又是一個列表，因此您可以得到類似於樹的列表列表。 樣例代碼：

@Component({
  selector: 'my-app',
  template: `
    <list [items]="Items">
      <ng-template let-items>{{ items | json }}</ng-template>
    </list>
    <list [items]="Items">
      <ng-template let-items>
        <list [items]="items">
          <ng-template let-items>{{ items | json }}</ng-template>
        </list>
      </ng-template>
    </list>
  `,
})
export class App {
  Items: Array<Array<string>> = [
    [ "1-1", "1-2", "1-3", ],
    [ "2-1", "2-2", "2-3", ],
    [ "3-1", "3-2", "3-3", ],
    [ "4-1", "4-2", "4-3", ],
    [ "5-1", "5-2", "5-3", ],
  ]
}

我還用可以運行它的代碼制作了一個小樣。 柱塞樣品