在 Angular 9 中动态加载 *ngFor 内部的组件

Question

我研究了 angular.io 上可用的代码，并使用mat-tab-group在我的场景中复制了它。 但是，我希望能够在*ngFor中使用 ad-host 指令。 我试过了，指令总是undefined 。

我在这里搜索，虽然有几个问题可以解决这个问题，但我没有找到关于如何做到这一点的明确示例。 这个想法是我有一个mat-tab-group由几个mat-tabs组成，它们是通过*ngFor指令加载的。 在每个选项卡中，我想根据所选索引显示不同的组件。 有什么办法可以做到这一点？

这是我修改后的 stackblitz：正如你所看到的，它的字面意思是this.adHost is undefined的。

Answer 1

您需要更改获取adHost引用的方式。

@ViewChild(AdDirective, {static: false}) adHost: AdDirective;

它需要是static: false （参见文档），因为它是由mat-tab动态呈现的，所以它并不总是在模板中。

并且不要在ngOnInit中调用loadComponents ，因为视图还没有被渲染，所以adHost将是未定义的。 例如使用ngAfterViewInit 。 我只是评论了它。

更正了堆栈闪电战

编辑

根据您的说明，我更改了很多内容（删除了您的setInterval ，使用@ViewChildren而不是ViewChild ，使用ngOnChanges知道何时呈现数据等）。

这是stackblitz示例