Как скрыть открытое меню коврика, когда открыто другое меню коврика

Question

При нажатии на одно из меню коврика в навигационной панели другое меню коврика, которое уже открыто, должно быть закрыто. Как скрыть коврик в меню

  <button mat-button [matMenuTriggerFor]="menu001" class="menu" >Assessments</button>
  <mat-menu #menu001="matMenu" class="m2" overlapTrigger="false">
    <a id="dialogUpsert01" class="nav-link" [routerLink]="['/b/dialog/upsert']">Dialog Questions</a>
    <a id="dialogSearch02" class="nav-link" [routerLink]="['/b/dialog/search']">Search Questions</a>
    <a id="dialogAuthor01" class="nav-link" [routerLink]="['/b/bot/meeting-request']">Meeting Request</a>
  </mat-menu>

  <button mat-button [matMenuTriggerFor]="menu" class="menu">Assessments2</button>
  <mat-menu #menu="matMenu" class="m2" overlapTrigger="false">
    <a id="createQuestionid" class="nav-link" [routerLink]="['/ad/q/upsert']">Create Questions</a>
    <a id="searchQuestionsId" class="nav-link" [routerLink]="['/ad/search-question']">Search Questions</a>
  </mat-menu>

В этом случае матовое меню2 запускается при открытии матового меню 1. Тогда матовое меню 1 должно быть скрыто.

Пожалуйста, помогите. Заранее спасибо

Answer 1

Согласно документации .

Вы можете найти выходное событие с именем menuOpened , которое вы можете прикрепить к каждому мат-меню, которое поможет вам узнатькакое меню открылось и с помощью

@ Viewchild Decorator вы можете переключать другое. Например,

, это может выглядеть так:

• в шаблоне

  <mat-menu #menu1="matMenu" (menuOpened)="menu1Opend()">
  
  </mat-menu>
  <mat-menu #menu2="matMenu" (menuOpened)="menu2Opend()">
  
  </mat-menu>
  

• в классе

  export class MyComponent {
   @ViewChild('menu1') menu1: MatMenu;
   @ViewChild('menu2') menu2: MatMenu;
   menu1Opend(){
       if(menu2.menuOpen) menu2.closeMenu()
   }
   menu2Opend(){
       if(menu1.menuOpen) menu1.closeMenu()
   }
  }
  

Еслив двух меню в разных компонентах вы можете использовать одноэлементную службу.