当其他席菜单打开时如何隐藏打开的席菜单

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>

在这种情况下，当mat菜单1被打开时，mat menu2就会被触发。那么垫菜单1应该是隐藏的。

请帮忙。提前感谢

Answer 1

根据文档。

您可以找到一个名为menuOpened的输出事件，您可以将该事件附加到每个席菜单上，这将帮助您了解打开的菜单以及

@Viewchild装饰器您可以切换另一个.

例如，它可能如下所示：

• 在模板中 “
• 在班上 导出类MyComponent { @ViewChild('menu1') menu1: MatMenu；@ViewChild('menu2') menu2: MatMenu；menu1Opend(){ if(menu2.menuOpen) menu2.closeMenu() } menu2Opend(){ if(menu1.menuOpen) menu1.closeMenu() }}

如果两个菜单位于不同的组件中，则可以使用单例服务。