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

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

}