ng-template 中的组件初始化答案

【问题标题】：Component initialization in ng-templateng-template 中的组件初始化
【发布时间】：2021-10-26 16:26:15
【问题描述】：

我正在使用 ng-content 将一个 Angular 组件包装在另一个组件中。外部组件应该完全控制何时渲染内部组件。但是，我遇到了一个我不明白的情况。外部组件使用如下模板（简化）：

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

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

我的问题是：

为什么会这样？
在这种情况下如何避免组件初始化？

【问题讨论】：

Hmmmm... 这就提出了一个问题，<app-outer> 的实际内容是什么？是<app-inner>，在app.component.html 中定义吗？还是<ng-template>，定义在outer.component.html？我觉得这是在深入挖掘 Angular 的内部工作原理

标签： javascript angular

【解决方案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>;
}

【讨论】：