如何以适当的方式将MatDialog置于最前面？

Question

我正在尝试使用 MatDialog 实现窗口功能，例如最小化和最大化等。 我想在焦点/单击时将窗口置于前面。

首先，我尝试通过操作所有叠加层的 z-index 来实现它。但它很脏而且容易破裂。

第二个想法是重新排序覆盖层，将聚焦窗口的覆盖层移动到 cdk-overlay-container 的最后位置。

const overlayRef = (dialogRef as any)._overlayRef as OverlayRef;
this.overlayContainer.getContainerElement().appendChild(overlayRef.hostElement);

它确实可以解决问题，但是，它也会使对话框没有响应。看起来 Angular 正在失去对重新连接的动态组件的跟踪？ （点击）的绑定不再起作用。

有人可以帮忙解答吗

1. 如何以正确的方式重新排序叠加？

2. 如果重新排序叠加效果不理想，还有其他方法可以实现目标吗？

任何帮助表示赞赏，谢谢:)

Answer 1

这样看起来就足够合适了

// CSS
.back-dialog {
  z-index: 999 !important;
} 

// TS
bringDialogFront(dialogRef: MatDialogRef<unknown>): void {
    const overlays = document.querySelectorAll('.cdk-global-overlay-wrapper');
    overlays.forEach((overlay) => {
      overlay.classList.add('back-dialog');
    });

    const dialog = dialogRef._containerInstance?.['_elementRef']
      ?.nativeElement as HTMLElement;

    const currentWrapper = this.getOverlayWrapper(dialog);
    if (currentWrapper) {
      currentWrapper.classList.remove('back-dialog');
    }
  }

  private getOverlayWrapper(
    dialog: HTMLElement | null,
  ): HTMLElement | undefined {
    if (!dialog) return;
    if (dialog.classList.contains('cdk-global-overlay-wrapper')) {
      return dialog;
    }
    return this.getOverlayWrapper(dialog.parentElement);
  }

Answer 2

请参考此内容以获得想法。不要错过将对话框组件作为

entrycomponent

的一部分。

https://www.dotnettricks.com/learn/angularmaterial/dialog-component-example