如何在ng-template和ngIf中使用自定义指令？

Question

我需要动态生成一个组件。我关注了Dynamic Component Loader的this tutorial。问题是我在模板中使用了*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 。 display：none 仅更改可见性。

请参阅此link，以了解 * ngIf 与 display：none

您编辑过的demo