Angular 17用MatDialog遇NullInjectorError：DialogService无提供者求助

这个错误的核心原因是Angular注入器找不到DialogService的提供者，以下是针对性的解决步骤：

1. 确保DialogService正确添加注入器装饰器 #

检查你的DialogService是否添加了@Injectable()装饰器，并指定全局提供范围，这是最常见的遗漏点：

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
// 导入你的确认对话框组件和DialogTypeEnum

@Injectable({
  providedIn: 'root' // 关键：让Angular全局注册该服务
})
export class DialogService {
  constructor(private dialog: MatDialog) {}

  async ShowConfirmDialog(title: string, message: string, type: DialogTypeEnum): Promise<boolean> {
    const dialogRef = this.dialog.open(YourConfirmDialogComponent, {
      data: { title, message, type }
    });
    const result = await dialogRef.afterClosed().toPromise();
    return result ?? false;
  }
}

如果不想全局提供，也可以在组件所属的NgModule的providers数组中注册：

@NgModule({
  // ...其他配置
  providers: [DialogService]
})
export class AccountsModule {}

2. 确认组件中正确注入服务 #

在AccountsComponent中必须通过构造函数注入DialogService，禁止手动实例化：

import { Component } from '@angular/core';
import { DialogService } from './path-to-dialog-service';
import { DialogTypeEnum } from './path-to-enum';

@Component({
  selector: 'app-accounts',
  templateUrl: './accounts.component.html'
})
export class AccountsComponent {
  // 正确通过构造函数注入
  constructor(private dlg: DialogService) {}

  async handleAbandon() {
    const selectedAnswer = await this.dlg.ShowConfirmDialog(
      "Abandon Changes?", 
      "Are you sure you want to abandon the changes you have made and load a new account?", 
      DialogTypeEnum.alert
    );

    if (selectedAnswer) {
      // 执行确认后的操作
    } else {
      // 执行取消后的操作
    }
  }
}

3. 确保导入MatDialog模块 #

因为使用了MatDialog，必须在模块（或独立组件）中导入MatDialogModule：

非独立组件（NgModule模式） #

import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    // ...其他模块
    MatDialogModule // 必须导入才能使用MatDialog
  ]
})
export class AppModule {}

独立组件模式（Angular 17常用） #

@Component({
  selector: 'app-accounts',
  templateUrl: './accounts.component.html',
  standalone: true,
  imports: [MatDialogModule], // 独立组件需直接导入
  // 如果DialogService未全局提供，需在此处注册
  // providers: [DialogService]
})
export class AccountsComponent {}

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