angular - 空注入(inject)器错误: No provider for MatDialog - trying to create a wrapper service for MatDialog

Question

我是编码新手，也是 Angular 新手，所以我想我会寻求一些帮助。这是我的第一个问题，请耐心等待。

我想为 Angular Material Dialog Service 创建一个包装服务(我只是想自学 - 这不是用于生产应用程序)，所以我在我的应用程序中创建了一个服务，如下所示:

import {Injectable} from '@angular/core';
import {MatDialog} from '@angular/material';
    
@Injectable({
    providedIn: 'root'
})
export class MatDialogWrapperService {
    
    constructor(private dialog: MatDialog) {
    }
    
    open(componentRef, config = {}) {
        this.dialog.open(componentRef, config);
    }
}

现在我尝试将其添加到我的应用程序中的另一个 Angular 组件中，如下所示:我导入它，将其添加到提供者数组中，将其放入构造函数中，然后将其放入方法中(我删除了一些代码为了方便阅读)

@Component({
    selector: 'app-intro-form',
    templateUrl: './intro-form.component.html',
    providers: [MatDialogWrapperService],
        styleUrls: ['./intro-form.component.scss']
})
export class IntroFormComponent {  
  
    constructor(private modalService: MatDialogWrapperService ) {
    }
    
    modalCall() {
        this.modalService.open(ModalFormComponent, {width: '500px'});
    }
}

当我加载应用程序时，我在控制台中看到以下错误:

Unhandled Promise rejection: StaticInjectorError(AppModule)[MatDialogWrapperService -> MatDialog]: StaticInjectorError(Platform:core)[ MatDialogWrapperService -> MatDialog]:

NullInjectorError: No provider for MatDialog! ; Zone: ; Task:Promise.then ; Value: Error: StaticInjectorError(AppModule)[MatDialogWrapperService -> MatDialog]: StaticInjectorError(Platform:core)[ MatDialogWrapperService -> MatDialog]:

我认为我已经在包装服务中正确注入(inject)了 MatDialog？我做错了什么？

提前致谢。

Answer 1

此错误意味着您尚未在应用程序中包含 Material 对话框模块，因此没有提供程序。

在您的 app.module.ts 中，确保您已将 MatDialogModule 添加到导入中。

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

为了将来的引用，您需要包含您正在使用的任何 Material 组件的模块。检查每个模块的文档，找出您需要哪个模块(尽管大多数都是不言自明的)