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

Question

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

<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中指定组件名来查找nth菜单组件并以编程方式打开菜单？

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();
  });

}