單擊外部時如何阻止 angular mat-menu 關閉？

Question

我使用 MatMenu 作為彈出窗口來瀏覽我的 web 應用程序上的新用戶，所以我不想在用戶點擊它外部時將其關閉。

當我單擊其中的按鈕時，我已經使用 $event.stopPropagation() 來阻止它關閉。 現在我想知道如何保持打開狀態，即使你在外面點擊。

Answer 1

點擊由覆蓋背景處理。 您可以根據您的菜單打開和關閉動態地將類應用/刪除到背景，並使用帶有pointer-events的 CSS 擊敗背景點擊。

例如：

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

Answer 2

我認為 [hasBackdrop]="false" 和 [hasBackdrop]="true" 可以處理

Answer 3

如果您試圖停止傳播整個菜單，您可以環繞 mat-menu-items。

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

Answer 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