如何检测材料菜单打开事件

Question

我想使用角材料菜单的menuOpened：EventEmitter属性。谁能帮忙使用此功能？我想打开菜单上的事件。

我正在将Angular 6与Angular Material Menu一起使用。

Answer 1

您将侦听器放在触发菜单的元素上：

<button mat-icon-button [matMenuTriggerFor]="mMenu" (menuOpened)="menuOpened()">
  <mat-icon>edit</mat-icon>
</button>

<mat-menu #mMenu>
  <button mat-menu-item>...</button>
  <button mat-menu-item>---</button>
</mat-menu>

在ts：

menuOpened() {
  console.log('Menu is open');
}

Answer 2

对于那些目前正在寻找 Angular 8+ 解决方案的人来说，解决方案更简单。根据文档，我们应该只使用以下属性：

@Output()menuClosed: EventEmitter<void>- 关闭关联菜单时发出的事件。

@Output() menuOpened: EventEmitter<void>- 打开关联菜单时发出的事件。

在 HTML 中（div 触发器）

<div class="user d-flex align-items-center border-left pl-4" (menuOpened)="menuOpened()" (menuClosed)="menuClosed()"
    [matMenuTriggerFor]="userProfile">
    <mat-icon class="icon-account">account_circle</mat-icon>
    <div class="d-flex flex-column mx-2">
      <span class="label-user">{{ profile?.fullname }}</span>
      <span class="label-role">{{ profile?.roles[0].name }}</span>
    </div>
    <mat-icon class="icon-arrow">keyboard_arrow_down</mat-icon>
  </div>

在 HTML 中（mat-menu）

<mat-menu class="menu-card" [class]="'custom-panel-menu'" #userProfile="matMenu" yPosition="below" xPosition="before">
  <div class="d-flex flex-row px-3 pb-1 content-profile">
    <div class="options-user d-flex flex-column">
      <span class="username"></span>
      <div class="menu-user">
        <mat-list class="list-menu">
          <h3 class="primary-text" mat-subheader>{{ profile?.email }}</h3>
          <mat-list-item (click)="openOptionMenu(menu)" *ngFor="let menu of menus">
            <mat-icon class="menu-icon" mat-list-icon>{{ menu.icon}}</mat-icon>
            <span class="menu-item-text" mat-line> {{menu.name}} </span>

           ...
           ...
</mat-menu>

在 TS 中：

 menuOpened() {
   console.log('menuOpened @configbug')
 }

 menuClosed() {
   console.log('menuClosed @configbug')
 }