如何在 Angular 中将 contentchildren 的每个孩子包装在他们自己的元素中

Question

假设我想创建一个组件来安排它的所有子组件。我应该能够提供元素，例如：

<app-layout-list>
  <p>foo</p>
  <p>bar</p>
  <p>etc</p>
</app-layout-list>

并且在 app-layout-list 中应该执行类似的操作

<ul>
  <li>
    <ng-content>
  </li>
<ul>

它为每个内容生成一个 li。这可以使用 ng-content 还是我需要做一些更复杂的事情？

Answer 1

当然可以！ :)

而且非常简单！ (Directly to the Stackplitz Demo)

Angular 为此类问题提供了完美的 API。

基本上你想要的是将你的<ng-content></ng-content> 分成不同的部分。

首先，您必须通过指令标记要在<li> 元素中显示的部分。实现这一目标的最佳方式是通过Structural Directive，因为它会为我们生成<ng-template></ng-template>，我们稍后需要它。

我们构建的Directive 非常基础。它只在构造函数中注入TemplateRef 并将模板保存在`public 变量中：

list-item.directive.ts

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appListItem]'
})
export class ListItemDirective {

  public itemTemplate: TemplateRef<any>;

  constructor(private templateRef: TemplateRef<any>) {
    this.itemTemplate = this.templateRef;
  }

}

通过这个指令，我们标记了我们喜欢放置在 <li> 元素中的 html 元素。

app.component.ts

<app-layout-list>
  <p *appListItem>foo</p>
  <p *appListItem>bar</p>
  <p *appListItem>etc</p>
</app-layout-list>

在LayoutListComponent 中，我们通过@ContentChildren(ListItemDirective) listItems 获取投影元素

layout-list.component.ts

import { Component, ContentChildren, QueryList } from '@angular/core';

@Component({
  selector: 'app-layout-list',
  templateUrl: './layout-list.component.html',
  styleUrls: ['./layout-list.component.css']
})
export class LayoutListComponent {
  @ContentChildren(ListItemDirective) listItems: QueryList<ListItemDirective>;
}

最后在Component template 中，我们将遍历listItems 并将每个项目的TemplateReference 放在ngTemplateOutlet 中

layout-list.component.html

<ul>
  <ng-container *ngFor="let item of listItems">
    <li>
      <ng-container [ngTemplateOutlet]="item.itemTemplate"></ng-container>
    </li>
  </ng-container>
</ul>

演示： Stackblitz Demo

GITHUB 源： Github Source