Angular 19中this.dialogRef.close不是函数问题求助

问题原因 #

你在组件的providers数组里手动提供了MatDialogRef的空对象{}，这会覆盖Angular Material在打开对话框时自动注入的真实MatDialogRef实例，导致调用close()方法时找不到对应函数。

解决步骤 #

1. 移除组件元数据中providers数组里的MatDialogRef和MAT_DIALOG_DATA提供者配置
2. 保持通过构造函数注入或inject()方法获取MatDialogRef和MAT_DIALOG_DATA的方式

修正后的代码 #

import { Component, inject, Inject } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { AsyncPipe } from '@angular/common';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import {
  MAT_DIALOG_DATA,
  MatDialog,
  MatDialogActions,
  MatDialogClose,
  MatDialogConfig,
  MatDialogContent,
  MatDialogModule,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';

export interface EncounterGrid {
  ID: number;
  Name: string;
  HP: number;
  AC: number;
  Initiative: number;
  Type: string;
}

@Component({
  selector: 'app-add-monster',
  imports: [
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    AsyncPipe,
    MatDialogModule,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
    MatButtonModule
  ],
  // 移除手动配置的providers
  templateUrl: './add-monster-dialog.html',
})
export class AddMonsterComponent {
  // 推荐通过构造函数注入，或者保留inject()方式二选一即可
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialogRef: MatDialogRef<AddMonsterComponent>
  ){}

  // 也可以保留inject写法：
  // readonly dialogRef = inject(MatDialogRef<AddMonsterComponent>);
  // @Inject(MAT_DIALOG_DATA) public data: any;

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

补充说明 #

当通过MatDialog.open()打开对话框时，Angular Material会自动为对话框组件注入对应的MatDialogRef和MAT_DIALOG_DATA实例，无需手动在组件的providers中配置。手动设置空对象会破坏这一自动注入逻辑，导致获取的不是真实的对话框引用。

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