angular - 如何在 Angular 组件中过滤 @ContentChildren

Question

我想创建一个可以按如下方式使用的组件:

<slides (close)="doSomething()">
  <slide>
    <header>Slide title</header>
    <main>Slide content (any html)</main>
  </slide>
  <slide>
    <header>Slide 2 title</header>
    <main>...</main>
  </slide>
  ...
</slides>

然后只显示一张幻灯片，您可以来回导航。对我来说，SlidesComponent 应该协调各个 SlideComponents。 SlideComponent 应该知之甚少，很可能被纯 HTML 取代。

我的问题是我找不到合适的方法来过滤 <slide>一次只显示一个。

我的第一个猜测是使用@ContentChildren DOM 查询，然后以某种方式过滤掉内容，一次只在 DOM 中输出一张幻灯片。

我用了@ContentChildren(SlideComponent) slides: QueryList<SlideComponent>;

它确实为我提供了投影 SlideComponents 的集合。但是，我没有找到一种方法来重用组件的 EmbeddedView 来简单地以编程方式“安装”它。

到目前为止，我唯一的成功是在每个 SlideComponent 上设置一个属性并依赖于 *ngIf当属性为 false 时，从 SlideComponent 的模板中不输出任何内容的指令。听起来不太对。

我的方法似乎有误，或者缺少有关内容投影、DOM 查询或嵌入式 View 的关键概念。

非常欢迎您提出意见和建议。谢谢!

Answer 1

我想我已经找到了一个令人满意的方法来做我想做的事。

简短的回答是使用结构指令。它们配备了必要的功能。

更长的答案(完整代码):

高级模板:

<slides>
  <div *slide>
    <header>Titre</header>
    <main>Content</main>
  </div>
  <span *slide>
    Anything I want, it is kept
  </span>
</slides>

SlideDirective(解决我的问题的实际方法):

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

@Directive({
  selector: '[slide]'
})
export class SlideDirective {

  constructor(
    private template: TemplateRef<any>,
    private container: ViewContainerRef
  ) {}

  display() {
    this.container.createEmbeddedView(this.template);
  }

  hide() {
    this.container.detach();
  }
}

幻灯片组件:

export class SlidesComponent implements AfterContentInit {
  @ContentChildren(SlideDirective) slides: QueryList<SlideDirective>;
  @ViewChild('slideContainer') slideContainer: ViewContainerRef;

  slideIndex = 0;
  slide: SlideDirective;

  constructor() {}

  ngAfterContentInit() {
    this.onSlideSelect(null, 0);
  }

  onSlideSelect(event: any, index: number) {
    const filtered = this.slides.filter((s: SlideDirective, i: number) => {
      return i === index;
    });

    const slide: SlideDirective = filtered[0];

    if (this.slide) {
      this.slide.hide();
    }

    slide.display();

    this.slideIndex = index;
    this.slide = slide;

  }
}

SlidesComponent 模板:

<main class="slide-viewport">
  <ng-content></ng-content>
</main>
<nav class="actions">
  <button (click)="onSkip()">Skip</button>
  <div class="carousel-buttons">
    <button *ngFor="let slide of slides; let i = index;" (click)="onSlideSelect($event, i)" class="carousel-button" [ngClass]="{ active: i == slideIndex }"></button>
  </div>
  <button (click)="onNext()" *ngIf="slideIndex < (slides.length - 1)">Next</button>
  <button (click)="onComplete()" *ngIf="slideIndex === (slides.length - 1)">Complete</button>
</nav>

我对这个解决方案很满意，但我仍然对评论和建议感兴趣