当您在其外部单击时如何阻止角垫菜单关闭? [英] How to stop angular mat-menu from closing when you click outside of it?

问题描述

我使用 MatMenu 作为弹出窗口来浏览我的网络应用上的新用户，所以我不想在用户点击它时关闭它.

I'm using MatMenu as a popup to tour around new users on my web app so I don't want to dismiss it whenever the user clicks outside of it.

我已经使用过 $event.stopPropagation() 来阻止它在我单击其中的按钮时关闭.现在我想知道如何保持打开，即使你点击它外面.

I've already used used $event.stopPropagation() to stop it from closing when I click a button inside it. Now I want to know how to keep it open even if you click outside of it.

推荐答案

点击由叠加背景处理.您可以根据菜单的打开和关闭动态地将类应用/删除背景，并使用 CSS 和 指针事件.

The click is handled by the overlay backdrop. You can apply/remove classes to the backdrop dynamically based on your menu open and close, and defeat the backdrop click using CSS with pointer-events.

例如:

HTML

<button mat-button [matMenuTriggerFor]="menu" (menuOpened)="preventCloseOnClickOut()" (menuClosed)="allowCloseOnClickOut()">Menu</button>

TS

export class MenuOverviewExample {
  constructor(private overlayContainer: OverlayContainer) {}

  preventCloseOnClickOut() {
    this.overlayContainer.getContainerElement().classList.add('disable-backdrop-click');
  }

  allowCloseOnClickOut() {
    this.overlayContainer.getContainerElement().classList.remove('disable-backdrop-click');
  }
}

全局 CSS

.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  pointer-events: none;
}

这篇关于当您在其外部单击时如何阻止角垫菜单关闭?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！