Angular 如何将md菜单项转换为物料md菜单
如何将菜单项包含到子组件中 见示例: dropdown.component.html header.component.html 它起作用了,但并不像预期的那样。 我可以通过单击查看项目和菜单,但我无法使用键盘访问项目。 同样在dropdown.component.ts中,如果我通过@ViewChild'navMenu'访问MdMenu组件,它会显示0个项目 此.mdMenu.items//0mdMenu指令使用@ContentChildren获取MdMenuItem列表 另见Angular 如何将md菜单项转换为物料md菜单,angular,typescript,angular-material2,Angular,Typescript,Angular Material2,如何将菜单项包含到子组件中 见示例: dropdown.component.html header.component.html 它起作用了,但并不像预期的那样。 我可以通过单击查看项目和菜单,但我无法使用键盘访问项目。 同样在dropdown.component.ts中,如果我通过@ViewChild'navMenu'访问MdMenu组件,它会显示0个项目 此.mdMenu.items//0mdMenu指令使用@ContentChildren获取MdMenuItem列表 另见 非常感谢。这就是
非常感谢。这就是解决办法。
<div class="dropdown">
<button md-icon-button
[mdMenuTriggerFor]="dropMenu">
<i class="glyphicon glyph-more"></i>
</button>
</div>
<md-menu #navMenu="dropMenu" [overlapTrigger]="false">
<ng-content></ng-content>
<!-- after rendering I'm able to see all buttons,
and interact with them my mouse click.
But they not accessible with keyboard -->
</md-menu>
<div class="header">
...
<dropdown>
<button md-menu-item>Button 1</button>
<button md-menu-item>Button 2</button>
<button md-menu-item>Button 3</button>
</dropdown>
...
</div>
@ContentChildren(MdMenuItem) items: QueryList<MdMenuItem>;
ngAfterContentInit() {
this._keyManager = new FocusKeyManager(this.items).withWrap();
this._tabSubscription = this._keyManager.tabOut.subscribe(() => this._emitCloseEvent());
}
...
export class DropDownComponent {
@ViewChild(MdMenu) menu: MdMenu;
@ContentChildren(MdMenuItem) items: QueryList<MdMenuItem>;
ngAfterViewInit() {
this.menu.items = this.items;
this.menu.ngAfterContentInit();
}
}