单击md-tab后,Md菜单关闭 [英] Md-menu closes after clicking md-tab inside
本文介绍了单击md-tab后,Md菜单关闭的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用Angular Material 2在 md-tab-group
内建立了一个 md-menu
每个 md-tab
我显示一个不同的列表。我期望看到的行为是用户能够在标签和 md菜单
之间切换以保持打开状态。
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.
事情是在每个标签上点击时关闭 md-menu
。
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>
如何防止 md-menu
从关闭?
推荐答案
您需要停止鼠标单击传播。你可以这样做:
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>
以及在您的component.ts文件中:
and in your component.ts file:
stopClickPropagate(event: any){
event.stopPropagation();
event.preventDefault();
}
链接到 Plunker Demo 。
这篇关于单击md-tab后,Md菜单关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文