ng-template内的ng-content始终创建内容，即使未渲染模板也是如此

问题描述

我遇到了一个奇怪的错误，该错误中的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，那么，按预期，我的inner-component不会由Angular创建（调试时，永远不会调用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-content，（尽管仍然明显使用transclusion-第一种解决方案不是一种选择）。

解决方法

您可以将模板移至父组件。

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

然后在您的externalComponent中获得对模板

的子引用

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

外部html

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

Stackblitz