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>

在这种情况下，打开菜单1时会触发菜单2。然后垫菜单1应该被隐藏。

请提供帮助。预先感谢

Answer 1

根据documentation。

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

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

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

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

1 个答案: