html - 如何将 contentchildren 的每个 child 包装在 Angular 中自己的元素中

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我们构建的是非常基础的。它只注入(inject) 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