Md-меню закрывается после нажатия на md-вкладку внутри

Question

Я построил md-menu с md-tab-group внутри, используя угловой материал 2. На каждом md-tab Я отображаю другой список. Я ожидаю увидеть поведение, состоящее в том, что пользователь сможет переключаться между вкладками и md-menu оставаться открытым.

Дело в том, что md-menu закрывая при каждом нажатии на одну из вкладок.

 <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 

 <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
  <md-tab-group >
   <md-tab label="My profile" id="personal">          
     <div class="row notification-row" *ngFor = "let notification of profile_notifications">
        ...
      </div>
   </md-tab>
   <md-tab label="Favorites " id="favorite-tab" >  
  ...
      </md-tab>
   </md-tab-group>
</md-menu>      

Как я могу предотвратить md-menu от закрытия?

Answer 1

Вы должны остановить распространение щелчка мышью. Вы можете сделать это так:

<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
    <md-tab-group (click)="stopClickPropagate($event)">
        <md-tab label="My profile" id="personal"></md-tab>
        <md-tab label="Favorites " id="favorite-tab"></md-tab>
    </md-tab-group>
</md-menu>

и в вашем файле component.ts:

stopClickPropagate(event: any){
    event.stopPropagation();
    event.preventDefault();
}

Ссылка на Демоверсию Plunker.