单击外部时如何阻止角垫菜单关闭？答案

【问题标题】：How to stop angular mat-menu from closing when you click outside of it?单击外部时如何阻止角垫菜单关闭？
【发布时间】：2019-10-08 17:11:56
【问题描述】：

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

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

【问题讨论】：

这里引用了相同的问题。 stackoverflow.com/questions/46967970/…
谢谢，但我已经看到了。提供的解决方案是在单击 INSIDE 时阻止 mat-menu 关闭。我的问题是当您单击它的外部（菜单）时如何阻止 mat-menu 关闭。

标签： angular angular-material angular7

【解决方案1】：

点击由叠加背景处理。您可以根据您的菜单打开和关闭动态应用/删除类到背景，并使用带有pointer-events 的 CSS 来阻止背景点击。

例如：

HTML

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

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

【讨论】：

谢谢你这对我有用。我想补充一点，您需要从“@angular/cdk/overlay”导入 { OverlayContainer }；首先在您的 TS 文件中。

【解决方案2】：

我认为 [hasBackdrop]="false" 和 [hasBackdrop]="true" 可以解决这个问题

【讨论】：

这应该是真正的答案，但要添加一个额外的注释，您需要设置 [hasBackdrop]="false"，以防止在菜单外部单击时关闭。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我遇到了同样的问题，我需要验证，因此外部点击（在背景上）不应该产生影响。删除带有指针事件的背景事件允许在所有后面的元素中进行交互，我的解决方案是创建背景的克隆并删除此克隆的侦听器。

    avoidClickOutside() {
      const overlayers = this.overlay
      .getContainerElement()
      .querySelectorAll('.controlled');

      if (overlayers && this.isAvoidClickOutside) {
        overlayers.forEach((element) => {
          const clone = element.cloneNode(true);
          (clone as Element).classList.add('clone');
          clone.addEventListener('click', (event: Event) => {
            if (confirm('Not allowed... Do you want remove this behaviour?!')) {
              this.removeCloneBackdrop();
            }
          });
          element.parentNode.insertBefore(clone, element.nextSibling);
        });
      }
   }

isAvoidClickOutside 是我要避免或不避免的控制变量。

可用：https://stackblitz.com/edit/angular-yjvkft

【讨论】：