当有人在垫子菜单外单击时，我如何调用函数？

Question

我想运行每次用户打开垫子菜单然后在其外部单击时的功能。我如何检测到垫子菜单已打开并且在其外部发生了点击事件？谢谢！

Answer 1

您可以使用来自 matMenuTrigger 的 @Output menuClosed 和 menuOpened

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

如果您需要更准确地触发您想要触发的事件，那么也许使用@ViewChild 可以实现它希望对您有所帮助

Answer 2

只需在按钮中使用 menuOpened，在 mat-menu 中使用 closed envent

<button mat-button [matMenuTriggerFor]="menu" (menuOpened)="open()" >Menu</button>
<mat-menu #menu="matMenu" (closed)="close($event)">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

.ts

  open(){
    console.log("open")
  }
  close(event:any){
    //event is undefined if you click outside
    if (event)
         console.log("click inside the menu")
      else
         console.log("click outside the menu")
  }

查看 docs、

当有人在垫子菜单外单击时，我如何调用函数？

How can I call a function when a someone clicks outside the mat-menu?

angular

angular-material

angular-material2