如何将自定义指令与ng-template和ngIf一起使用

Question

我需要动态生成一个组件。我学习了动态组件加载器的教程。问题是我在模板中使用了*ngIf指令。现在我在AdBannerComponent:中遇到了以下错误

TypeError: "this.adHost is undefined"

教程中的代码是在stackblitz上提供的。

这是我的AdBannerComponent模板的代码：

<div *ngIf="flag">
<h3>Advertisements {{flag.name}}:</h3>
<ng-template ad-host></ng-template>
</div>

我应该如何使用ng-template来显示带有ngIf指令的生成组件？

Answer 1

这是因为您使用了view child。如果要使用viewchild，则应将组件渲染为子组件。但带有*ngIf。因此您可以使用display:none样式，而不是*ngIf显示：none仅更改可见性。

请参阅此链接了解*ngIfvs显示：none

您编辑的演示