时间戳

首页 > 解决方案 > ng-template 中的组件初始化

javascript - ng-template 中的组件初始化

问题描述

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

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

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

我的问题是：

标签： javascriptangular

解决方案

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

推荐阅读