Переключение меню программно, если у меня есть несколько меню?

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

}