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来简单地安装＆＃39;以编程方式。

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

我似乎对这种方法有误，或者缺少关于内容投影，DOM查询或嵌入式视图的关键概念。

非常欢迎您的意见和建议。谢谢！

Answer 1

这与选项卡组非常相似，例如Angular Material tab control。

角度材料tabs的源代码可能很有趣

MatTab https://github.com/angular/material2/blob/569c2219e468077b563d2ccce2624851605c1df0/src/lib/tabs/tab-group.ts

MatTabGroup https://github.com/angular/material2/blob/bd3d0858f7f3e1ba4dbb1e8ac1226f2f9748ec69/src/lib/tabs/tab.ts

一开始很难确切地看到它们添加的位置并显示选项卡内容-但魔术在这里：

 ngOnInit(): void {
   this._contentPortal = new TemplatePortal(
       this._explicitContent || this._implicitContent, this._viewContainerRef);
 }

他们使用称为'Portals'的东西（Angular Material CDK（轻量级组件/实用程序）的一部分）来管理内容。

如果您想变得非常复杂，请查看：-）

如何在Angular组件

1 个答案: