时间戳

首页 > 解决方案 > 打开其他垫子菜单时如何隐藏打开的垫子菜单

angular - 打开其他垫子菜单时如何隐藏打开的垫子菜单

问题描述

单击导航栏中的一个垫子菜单时，应关闭已打开的另一个垫子菜单。如何隐藏垫子菜单

  <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 menu 1 打开时会触发 mat menu2。然后 mat menu 1 应该被隐藏。

请帮忙。提前致谢

标签： angularangular-materialangular6

解决方案

根据文档。

您可以找到一个名为menuOpened的输出事件，您可以将其附加到每个 mat-menu，这将帮助您了解打开了哪个菜单并借助

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

例如，它可能看起来像这样：

  • 在模板中

    <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()
 }
}

如果两个菜单在不同的组件中，您可能会使用单例服务。

推荐阅读