如何在angular material对话框打开时禁用背景页中的所有控件/点击

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog-component.component.html',
  styleUrls: ['./dialog-component.component.css']
})
export class DialogComponentComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  ngOnInit(): void {
  }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogContentComponent, {
      disableClose: true,  // 禁止通过点击外部区域或按ESC键关闭对话框
      panelClass: 'my-dialog-panel'  // 添加自定义CSS类以覆盖默认样式
    });

    // 禁用背景页中的所有控件/点击
    dialogRef.afterOpened().subscribe(() => {
      document.body.style.pointerEvents = 'none';
    });

    // 当对话框关闭时恢复背景页的控件/点击
    dialogRef.afterClosed().subscribe(() => {
      document.body.style.pointerEvents = 'auto';
    });
  }
}

@Component({
  selector: 'app-dialog-content-component',
  template: `
    <h2 mat-dialog-title>Dialog Title</h2>
    <mat-dialog-content>
      Dialog content goes here.
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Close</button>
    </mat-dialog-actions>
  `,
})
export class DialogContentComponent {}

<button mat-button (click)="openDialog()">Open Dialog</button>