Question

如果我的模板中有2个菜单组件，如下所示

<button md-icon-button [md-menu-trigger-for]="menu">
    <md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
  <button md-menu-item>Refresh</button>
  <button md-menu-item>Settings</button>
  <button md-menu-item>Help</button>
  <button md-menu-item disabled>Sign Out</button>
</md-menu>

<button md-icon-button [md-menu-trigger-for]="menu1">
    <md-icon>more_vert</md-icon>
</button>
<md-menu #menu1="mdMenu">
  <button md-menu-item>Refresh</button>
  <button md-menu-item>Settings</button>
  <button md-menu-item>Help</button>
  <button md-menu-item disabled>Sign Out</button>
</md-menu>

如何以编程方式切换第二个菜单组件？通常@ViewChild（MdMenuTrigger）如果我在模板中只有一个菜单组件，我们可以使用以下内容。有没有办法在@ViewChild中指定组件名称来找出第n个菜单组件并以编程方式打开菜单？

Answer 1

首先，您需要将 AfterViewInit 挂钩到您的组件

class YourComponent implements AfterViewInit {

然后你可以使用 @ViewChildren

来做到这一点

@ViewChildren(MdMenuTrigger) triggers: QueryList<MdMenuTrigger>; 
// use ViewChildren to get a list of menu element

ngAfterViewInit() {

  // inside ngAfterViewInit lifecycle
  // you get the triggers

  this.triggers.forEach((item)=>{
    item.openMenu();
  });

}

如果我有多个菜单，以编程方式切换菜单？

1 个答案: