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

Posted 2023-02-22

【中文标题】在 Angular 9 中动态加载 *ngFor 内的组件

【英文标题】：Dynamically load components inside *ngFor in Angular 9

【发布时间】：2020-08-13 05:26:45

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

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

Corrected stackblitz

编辑

根据你的澄清，我改变了很多东西 （删除你的setInterval，用@ViewChildren代替ViewChild，用ngOnChanges知道什么时候渲染数据等等）。

这里是stackblitz example

【讨论】：

不幸的是，这并不像我希望的那样工作。也许我解释得不好，但想法是在每个选项卡中获取一个组件，所以如果第一个选项卡包含一个 HeroProfileComponent 我应该在第一个选项卡内容中显示一个 HeroProfileComponent，如果第二个是一个 HeroJobAdComponent 它应该显示一个HeroJobAdComponent 里面，等等等等。在您的示例中，只有第一个选项卡显示内容，而其他选项卡仍为空。请注意，如果我将ng-template 移到mat-tab-group 之外，一切正常，但我认为这不是一个好方法。