内側のmd-tabをクリックするとMdメニューが閉じます

Question

md-tab-groupを内側にして、md-menuを内側に、角材2を使用して閉じます。md-tabには別のリストが表示されます。私が見ることを期待している動作は、ユーザーがタブとmd-menuを開いたままにすることができるように切り替えることができるということです。

問題は、タブの1つをクリックするたびに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

マウスクリック伝搬を停止する必要があります。 Plunker Demoに

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

リンク：

<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ファイル内：あなたはこのようにそれを行うことができます。