angular - 如何从列表中显示 ng-templates

Question

我有一个 AppComponent，它包含一个 ShapeComponents 列表。我实现了一些扩展 ShapeComponent 的组件，例如 LineComponent、CircleComponent、RectangleComponent。他们每个人都有自己的 ng-template 和 #shapeTemplate。在我的 app.component.html 中，我想遍历 ShapeComponents 列表并显示每个 ng-template(来自 LineComponent、CircleComponent 等)。

所以我有

shapes: ShapeComponent[] = []

其中包含 LineComponent、CircleComponent 等

我想要这样的东西

<div *ngFor="let shape of shapes">
    <!-- How to display the ng-template from for example LineComponent or Circle -->
</div>

我认为使用@ViewChildren 或@ContentChildren 会很有用，但不知道如何处理

Answer 1

我最近做了类似的事情。这是最后的 stackblitz

首先，我创建一个 ShapeComponent

import { 
  Component, 
  Input, 
  ViewChild, 
  TemplateRef 
} from '@angular/core';

@Component({
  selector: 'shape',
  template: `<ng-template><ng-content></ng-content></ng-template>`,
})
export class ShapeComponent  {

  @ViewChild(TemplateRef) template: TemplateRef<any>;
}

它的模板有一个 ng-template，这样我们就可以引用它，还有 ng-content，这样这个组件的消费者就可以转换他们的内容。

使用 @ViewChild(TemplateRef) 你可以获得 ng-template 的引用以及它里面的任何内容，因为 ng-content .

让我们创建一个 LineComponent

@Component({
  selector: 'line',
  template: `<ng-template>
    This is line and its content: <ng-content></ng-content>
  </ng-template>`,
  providers: [{
    provide: ShapeComponent,
    useExisting: forwardRef(() => LineComponent)
  }]
})
export class LineComponent extends ShapeComponent  {}

和CircleComponent

@Component({
  selector: 'circle',
  template: `<ng-template>
    This is circle and its content: <ng-content></ng-content>
  </ng-template>`,
  providers: [{
    provide: ShapeComponent,
    useExisting: forwardRef(() => CircleComponent)
  }]
})
export class CircleComponent extends ShapeComponent  {}

这两个组件都扩展了 ShapeComponent 并根据自己提供了它。因此，无论何时有人尝试注入(inject) ShapeComponent，他们都会得到一个 LineComponent 或一个 ShapeComponent。

最后，让我们创建一个 ShapeHolderComponent，它将把所有这些粘合在一起

@Component({
  selector: 'shape-holder',
  template: `
    <div *ngFor="let child of children">
      <ng-container *ngTemplateOutlet="child.template"></ng-container>
    </div>
  `,
})
export class ShapeHolderComponent  {

  @ContentChildren(ShapeComponent) children: QueryList<ShapeComponent>;
} 

您可以使用 ContentChildren 列出 ShapeComponent。由于每个 ShapeComponent 都提供了它们自己，我们可以获得它们的列表并使用它们的 template。

最后，让我们在 AppComponent

中使用所有这些

<shape-holder>
  <circle>
    Custom Circle content
  </circle>
  <line>
    Custom Line content
  </line>
</shape-holder>

输出是

This is circle and its content: Custom Circle content
This is line and its content: Custom Line content