跨组件关闭MatDialog遇dialogRef.close()报错及注入问题排查

问题根源 #

你遇到的核心问题是：RisksComponent并非ImportProcessingDialog的内部/子组件，直接注入MatDialogRef<ImportProcessingDialog>无效——MatDialogRef的实例仅存在于Dialog组件自身的注入器中，外部组件无法直接获取正确实例。你手动提供的空对象{}没有close()方法，因此触发类型错误。

方案一：通过共享服务存储Dialog引用 #

1. 创建共享服务 #

import { Injectable } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { ImportProcessingDialog } from './import-processing-dialog.component';

@Injectable({ providedIn: 'root' })
export class DialogService {
  private importDialogRef: MatDialogRef<ImportProcessingDialog> | null = null;

  setImportDialogRef(ref: MatDialogRef<ImportProcessingDialog>): void {
    this.importDialogRef = ref;
  }

  closeImportDialog(): void {
    if (this.importDialogRef) {
      this.importDialogRef.close();
      this.importDialogRef = null; // 清空引用避免内存泄漏
    }
  }
}

2. 修改ImportDataComponent存储Dialog引用 #

打开Dialog时，将返回的dialogRef存入共享服务：

export class ImportDataComponent implements OnInit {
  constructor(
    private importProcesingDialog: MatDialog,
    private dialogService: DialogService
  ) {}

  private onClickImport() {
    const dialogRef = this.importProcesingDialog.open(ImportProcessingDialog, {
      width: '30%'
    });
    this.dialogService.setImportDialogRef(dialogRef);

    // 可选：Dialog关闭后自动清空引用
    dialogRef.afterClosed().subscribe(() => {
      this.dialogService.setImportDialogRef(null);
    });
  }
}

3. 修改RisksComponent调用服务关闭Dialog #

无需注入MatDialogRef，直接调用共享服务方法：

export class RisksComponent {
  constructor(private dialogService: DialogService) {}

  oncloseClick(){
    this.dialogService.closeImportDialog();
  }
}

方案二：通过RxJS Subject实现松耦合通信（推荐） #

这种方式无需存储Dialog引用，通过事件通知Dialog自行关闭，耦合度更低：

1. 修改共享服务添加Subject #

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DialogService {
  private closeImportDialog$ = new Subject<void>();

  // 供外部组件触发关闭事件
  triggerCloseImportDialog(): void {
    this.closeImportDialog$.next();
  }

  // 供Dialog组件订阅关闭事件
  getCloseImportDialogSignal() {
    return this.closeImportDialog$.asObservable();
  }
}

2. 修改ImportProcessingDialog订阅关闭信号 #

在Dialog内部订阅服务信号，收到后自行关闭：

export class ImportProcessingDialog extends AppComponentBase {
  constructor(
    public dialogRef: MatDialogRef<ImportProcessingDialog>,
    private dialogService: DialogService
  ) {
    super(injector);
    this.dialogService.getCloseImportDialogSignal().subscribe(() => {
      this.dialogRef.close();
    });
  }

  onCloseClick(): void{
    this.dialogRef.close();
  }
}

3. 修改RisksComponent触发关闭信号 #

export class RisksComponent {
  constructor(private dialogService: DialogService) {}

  oncloseClick(){
    this.dialogService.triggerCloseImportDialog();
  }
}

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