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

Question

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

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

Here 是我修改过的 stackblitz：如您所见，它在控制台中的字面意思是 this.adHost is undefined。

Answer 1

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

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

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

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

编辑

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

Dynamically load components inside *ngFor in Angular 9