angular - ng-template 中的 ng-content 总是创建内容，即使模板没有被渲染

Question

我正面临一个奇怪的错误，它ng-content包裹在一个ng-template.

假设我有一个inner-component显示在 a中的组件outer-component：

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

如果condition=false，则如预期的那样， myinner-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是，即使它从未被渲染，它也会被创建。这对我来说是个问题，因为内部组件（我无法修改的第 3 方组件）确实需要在应用程序中呈现时创建。

你能想出一个我可以在外部组件上使用的解决方法来避免创建 ng-content，（同时显然仍然使用嵌入 - 第一个解决方案不是一个选项）。

score 1 · Accepted Answer

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

<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>

1 回答 1