메뉴가 두 개 이상인 경우 프로그램 방식으로 토글합니까?

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> 

어떻게 프로그래밍 방식으로 두 번째 메뉴 구성 요소를 전환하려면 아래처럼 내 템플릿에 2 메뉴 구성 요소를 겪고 있다면? 일반적으로 @ViewChild (MdMenuTrigger) 템플릿에 메뉴 구성 요소가 하나만있는 경우 다음을 사용할 수 있습니다. @ViewChild에서 구성 요소 이름을 지정하여 n 번째 메뉴 구성 요소를 찾고 프로그래밍 방식으로 열면 어떤 방법이 있습니까?

Answer 1

첫째, 당신은 @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(); 
    }); 

}