如何渲染嵌套的 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：

@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=preview

提前谢谢你。

更新

最后我想将 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 组件只渲染a 容器元素中提供的列表项模板。示例代码：

@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", ],
  ]
}

我还制作了一个带有代码的 plunker 示例，您可以在其中运行它。 Plunker Sample