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挂钩，尽管从DOM中删除了真正的添加，但OnDestroy永远不会触发。以下是关于此https://github.com/angular/angular/issues/13921的封闭式问题（有一个示例的plnkr）和角度文档https://github.com/angular/angular.io/issues/3099的问题。

但是这个问题仍然存在 - 我怎么能这样才能在菜单打开时将菜单项实例化，如果关闭则正确销毁？所有钩子都应该仅与真实的DOM状态相关。

Answer 1

更新Angular 5

(defun maxx (l) (if (null l) 0 (if(> (car l) (maxx(cdr l))) (car l) (maxx (cdr l)))))已重命名为ngOutletContext

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

<强>原始

您可以使用

ngTemplateOutletContext

<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; }（有一些答案显示如何做到这一点，我没有时间只是不去查找它们）

Answer 2

这是使用ngTemplateOutlet

的示例

Unity

根据角度2

2 个答案: