如何在 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

当然可以！:)

而且非常简单！（直接到 Stackplitz 演示）

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

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

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

在Directive我们构建是非常基本的。它只TemplateRef在构造函数中注入 并将模板保存在一个公共变量中：

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 演示

GITHUB 来源： Github 来源