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>

和

外部组件.html

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

外部组件.ts

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