当您在其外部单击时如何阻止角垫菜单关闭？

Question

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

我已经使用了 $event.stopPropagation() 来阻止它在我单击其中的按钮时关闭。现在我想知道如何保持打开状态，即使您单击它的外部。

Answer 1

如果您试图停止传播整个菜单，您可以环绕 mat-menu-items。

<mat-menu [hasBackdrop]="false">
     <div  (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
       <your-app></your-app>
     </div>
</mat-menu>

Answer 2

单击由覆盖背景处理。您可以根据菜单的打开和关闭动态地向背景应用/删除类，并使用带有指针事件的CSS 来阻止背景单击。

例如：

超文本标记语言

<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;
}

Answer 3

我认为 [hasBackdrop]="false" 和 [hasBackdrop]="true" 可以处理