angular - 根据 Angular 2 中的 DOM 状态实例化嵌入的组件

Question

常用菜单使用案例

<menu>
    <menu-item1></menu-item1>
    <menu-item2></menu-item2>
    <menu-item3></menu-item3>
</menu>

菜单模板

<div *ngIf="open$ | async">
    <ng-content></ng-content>
</div>

我很惊讶听到所有 menu-item*组件(及其所有子)将被实例化，尽管它们存在于 DOM 和 menu 中组件 *ngIf状态。他们的OnInit和 AfterViewInit即使菜单从未打开并且 OnDestroy 也会调用钩子(Hook)尽管从 DOM 中进行了真正的添加和删除，但永远不会触发。这是关于此的已关闭问题 https://github.com/angular/angular/issues/13921 (有一个带有示例的 plnkr)和 Angular 文档的问题 https://github.com/angular/angular.io/issues/3099 .

但这个问题仍然存在——我该怎么做才能让菜单项仅在菜单打开时实例化并在关闭时正确销毁？所有 Hook 都应仅在与真实 DOM 状态相关时触发。

Answer 1

更新 Angular 5

ngOutletContext 已重命名为 ngTemplateOutletContext

另见 https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原创

你可以使用

<menu>
  <template>
    <menu-item1></menu-item1>
    <menu-item2></menu-item2>
    <menu-item3></menu-item3>
  <template>
</menu>

@Component({
  selector: 'menu',
  template: `
<div *ngIf="open$ | async">
  <template [ngTemplateOutlet]="templateRef"></template>
</div>
`
})
class MenuComponent {
  @ContentChild(TemplateRef) templateRef:TemplateRef;
}

您还可以将上下文传递给 ngTemplateOutlet(有一些答案展示了如何做到这一点，我没有时间不去查找它们)