单击里面的 md-tab 后，MD-menu 关闭 [英] Md-menu closes after clicking md-tab inside

问题描述

我使用 Angular Material 2 构建了一个 md-menu，里面有一个 md-tab-group.在每个 md-tab 上，我显示不同的列表.我期望看到的行为是用户能够在选项卡和 md-menu 之间切换以保持打开状态.

问题是 md-menu 在每次点击其中一个标签时关闭.

 <md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown"><md-tab-group ><md-tab label="我的个人资料" id="个人"><div class="row notification-row" *ngFor = "让 profile_notifications 的通知">...

</md-tab><md-tab label="收藏夹" id="收藏夹标签" >...</md-tab></md-tab-group></md-菜单>

如何防止 md-menu 关闭?

解决方案

您需要停止鼠标点击传播.你可以这样做:

<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown"><md-tab-group (click)="stopClickPropagate($event)"><md-tab label="我的个人资料" id="个人"></md-tab><md-tab label="收藏夹" id="收藏夹标签"></md-tab></md-tab-group></md-菜单>

在你的 component.ts 文件中:

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

链接到 Plunker 演示.

I built an md-menu with an md-tab-group inside, using Angular Material 2. On each md-tab I display a different list. The behavior I'm expecting to see is that the user to be able to switch between tabs and the md-menu to stay opened.

The thing is that the md-menu closing on every click on one of the tabs.

 <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>      

How can I prevent the md-menu from closing?

解决方案

You need to stop the mouse click propagation. You can do it like this:

<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>

and in your component.ts file:

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

Link to Plunker Demo.

这篇关于单击里面的 md-tab 后，MD-menu 关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！