单击里面的 md-tab 后，md-menu 关闭

Question

我使用 Angular Material 构建了一个 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();
}

Link 到 Plunker Demo.

单击里面的 md-tab 后，md-menu 关闭

Md-menu closes after clicking md-tab inside

angular-material

angular2-template

angular-material2

angular

angular2-md-tabs