Angular Material MatDialog：如何让遮罩仅覆盖特定组件？

这个需求我之前也折腾过，Angular 8+版本里可以通过自定义Overlay容器+样式调整的方式实现，完全不需要依赖旧版本的第三方方案，具体步骤如下：

1. 自定义OverlayContainer #

MatDialog的遮罩和弹窗都是基于Angular CDK的Overlay实现的，默认会挂载到document.body下，所以我们要先自定义一个Overlay容器，让它把弹窗挂载到你指定的组件内部。

新建custom-overlay-container.ts文件：

import { OverlayContainer } from '@angular/cdk/overlay';

export class CustomOverlayContainer extends OverlayContainer {
  /**
   * 将Overlay容器绑定到指定DOM元素
   * @param element 目标组件的DOM节点
   */
  setContainerElement(element: HTMLElement): void {
    this._containerElement = element;
    // 添加上CDK默认的容器样式类
    this._containerElement.classList.add('cdk-overlay-container');
  }
}

2. 在目标组件中配置并使用自定义容器 #

在你想要让遮罩覆盖的组件里，注入这个自定义容器，并把它绑定到组件内的指定DOM节点上：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';
import { CustomOverlayContainer } from './custom-overlay-container';
import { MatDialog } from '@angular/material/dialog';
import { YourDialogComponent } from './your-dialog.component'; // 替换成你的弹窗组件

@Component({
  selector: 'app-target-area',
  templateUrl: './target-area.component.html',
  styleUrls: ['./target-area.component.css'],
  // 仅在当前组件内使用自定义Overlay容器，不影响全局弹窗
  providers: [
    { provide: OverlayContainer, useClass: CustomOverlayContainer }
  ]
})
export class TargetAreaComponent implements OnInit {
  // 获取组件内用来承载弹窗的DOM节点
  @ViewChild('dialogHost', { static: true }) dialogHost!: ElementRef<HTMLElement>;

  constructor(
    private overlayContainer: OverlayContainer,
    private dialog: MatDialog
  ) {}

  ngOnInit(): void {
    // 将Overlay容器设置为当前组件内的指定节点
    (this.overlayContainer as CustomOverlayContainer).setContainerElement(this.dialogHost.nativeElement);
  }

  // 打开弹窗的方法
  openRestrictedDialog(): void {
    this.dialog.open(YourDialogComponent, {
      // 可选：设置弹窗相对于父容器的位置
      position: {
        top: '20px',
        left: '20px'
      }
    });
  }
}

对应的组件模板target-area.component.html：

<!-- 这个div就是遮罩要覆盖的指定区域 -->
<div #dialogHost class="target-container">
  <button mat-raised-button (click)="openRestrictedDialog()">打开限定遮罩的弹窗</button>
</div>

3. 调整遮罩样式 #

默认的CDK遮罩是全屏定位的，我们需要修改CSS让它适配目标容器：

.target-container {
  position: relative; /* 必须设置相对定位，让内部绝对定位的遮罩以它为基准 */
  width: 800px;
  height: 600px;
  border: 1px solid #eee;
  overflow: hidden; /* 防止遮罩超出容器范围 */
}

/* 重写遮罩的定位和尺寸 */
.target-container .cdk-overlay-backdrop {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

关键注意点 #

• 一定要在目标组件的providers里声明自定义容器，这样只会影响当前组件内打开的弹窗，不会干扰全局其他弹窗的行为。
• 如果需要在多个组件复用这个逻辑，可以把自定义容器的绑定逻辑封装成一个服务，避免重复代码。

内容的提问来源于stack exchange，提问作者ar099968