Question

我正在尝试创建一个通用的幻灯片显示组件，该组件将包含多个组件，然后将根据某些用户操作循环遍历。
它与Angular Material的stepper component非常相似。

到目前为止，我发现您可以使用@ContentChildren来获取对多个（传入的）组件/内容的引用，但是我不确定如何实际呈现这些组件。

这是我创建的一个示例：https://stackblitz.com/edit/angular-yjfbwb
app.component.html文件包含一个<tours></tours>标记，只要您用#tour对其进行标记，就可以传递任何想要的标记。在tours.component.ts内部，您将看到我只是在遍历传入的组件。
但是我该如何渲染它们呢？

我已经在Google周围搜索了，看来这不是我的方式吗？但是，也许我搜索不正确。理想情况下，对于我的团队，我想使此游览组件尽可能简单易用（基本上在上面的示例中如此）。

任何帮助将不胜感激！

Answer 1

有很多方法可以做到这一点。

这是一个简单的解决方案。只是想知道。您可能要根据自己的具体问题采取不同的操作。

对于要在游览组件中投影的每个元素，必须创建一个模板。您可以通过StructuralDirective来做到这一点。

import {Directive, TemplateRef, Input} from '@angular/core';

@Directive({
  selector: '[appTour]'
})
export class TourDirective {
  @Input('appTour') id: number;
  constructor(public template: TemplateRef<any>) {
  }

}

用指令标记ToursComponent中的元素（不要忘记星号）：

<tours>
  <p *appTour="123">hello</p>
  <p *appTour="1234">world</p>
</tours>

要确定指令，您可以将导览的id传递给模板。

现在，在ToursComponent内通过TourDirective注入@ContentChildren并在ViewContainerRef | <ng-container>内传递要渲染的模板

import { Component, ContentChildren, QueryList } from '@angular/core';
import { TourDirective } from './tour.directive';

@Component({
  selector: 'tours',
  template: `
  <ng-container *ngFor="let tour of tours.toArray()">
    <ng-container *ngIf="tour.id === tourToDisplay">
      <ng-container [ngTemplateOutlet]="tour.template"></ng-container>
    </ng-container>
  </ng-container>`,
})
export class ToursComponent {

  public tourToDisplay = 123;
  
  @ContentChildren(TourDirective) tours: QueryList<TourDirective>;
}

Updated Stackblitz demo

如何使用@ContentChildren并仅呈现特定的子组件而不是所有子组件？

1 个答案: