Как остановить закрытие углового мат-меню при нажатии за его пределы?

Question

Я использую MatMenu как всплывающее окно для просмотра новых пользователей в моем веб-приложении, поэтому я не хочу отклонять его, когда пользователь нажимает за его пределами.

Я уже использовал used $event.stopPropagation (), чтобы остановить его закрытие, когда я нажимаю кнопку внутри него. Теперь я хочу знать, как сохранить его открытым, даже если вы нажмете за его пределами.

Answer 1

Клик обрабатывается наложенным фоном. Вы можете применять / удалять классы к фону динамически в зависимости от того, открываете и закрываете ваше меню, и побеждаете щелчок по фону, используя CSS с 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;
}