ng-template中的组件初始化

Question

我使用ng-content将一个Angular组件包装在另一个组件中。外部组件应该完全控制内部组件何时呈现或不呈现。然而，我遇到了一个我不明白的情况。外部组件使用如下模板(简化):

<ng-template>
<ng-content></ng-content>
</ng-template>

根据我的理解，内容根本不应该呈现，因为它包含在ng-template中。在这个stackblitz示例中，您可以看到内部组件没有呈现，但它仍然被初始化。控制台日志在内部组件的OnInit仍然显示在控制台中。

我的问题是:

• 为什么会发生这种情况?
在这种情况下，我如何避免组件初始化?

Answer 1

Angular文档中有关于结构指令的信息:它只是呈现或不呈现模板，而没有关于在其中加载组件的详细信息。

第二，你传递已经编译和渲染的对象给ng-content。

如果你想要lazy加载模板，只需传递模板:

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

和

outer.component.html

<ng-content></ng-content>
<ng-template [ngTemplateOutlet]="template"></ng-template>

outer.component.ts

@Component({
selector: 'app-outer',
templateUrl: './outer.component.html'
})
export class OuterComponent {
@ContentChild(TemplateRef) template: TemplateRef<unknown>;
}