ng模板内的ng内容始终创建内容，即使模板未呈现也是如此

Question

我面临一个奇怪的错误，ng-content封装在ng-template中。

假设我有一个组件inner-component，它显示在outer-component:中

<ng-container *ngIf="condition" [ngTemplateOutlet]="test"></ng-container>
<ng-template #test>
<inner-component></inner-component>
</ng-template>

如果是condition=false，那么，正如预期的那样，Angular永远不会创建我的inner-component(调试时，ngOnInit()永远不会被调用(。

现在，如果我的外部组件是：

<ng-container *ngIf="condition" [ngTemplateOutlet]="test"></ng-container>
<ng-template #test>
<ng-content></ng-content>
</ng-template>

并且，仍然使用condition=false，我写：

<outer-component>
<inner-component></inner-component>
</outer-component>

然后，令我惊讶的是，inner-component被创建了，即使它从未被渲染过。这对我来说是个问题，因为内部组件(我不能修改的第三方组件(在应用程序中呈现时确实需要创建。

你能想出一个我可以在外部组件上使用的解决方案来避免创建ng内容吗。

Answer 1

您可以将模板移动到父组件。

<app-outer>
<ng-template #test>
<app-inner></app-inner>
</ng-template>
</app-outer>

并且在outerComponent中获取模板的子引用

@ContentChild('test') testTemplate: TemplateRef<ElementRef>;

外层html

<ng-container *ngIf="condition" [ngTemplateOutlet]="testTemplate"></ng-container>

Stacklitz