angular - 如何渲染嵌套的 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 组件仅呈现容器元素中提供的列表项模板。示例代码:

@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