常见菜单使用案例
<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
and AfterViewInit
即使菜单从未打开过,钩子也会被调用OnDestroy
尽管从 DOM 中进行了真正的添加-删除,但永远不会触发。这是一个关于此的已关闭问题https://github.com/angular/angular/issues/13921 https://github.com/angular/angular/issues/13921(有一个带有示例的plnkr)和角度文档的问题https://github.com/angular/angular.io/issues/3099 https://github.com/angular/angular.io/issues/3099.
但这个问题仍然存在 - 我该如何做才能使菜单项仅在打开菜单时实例化并在关闭时正确销毁?所有钩子应该只触发与真实 DOM 状态相关的事件。
更新角度 5
ngOutletContext
被重命名为ngTemplateOutletContext
也可以看看https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29 https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
您可以使用
<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
(有一些答案说明了如何做到这一点,我没有时间不去查找它们)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)