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);
    }
}

现在，我尝试将其添加到应用程序中的另一个角度组件中，如下所示：我将其导入，添加到providers数组中，放入构造函数中，然后将其放入方法中（我已经删除了一些代码为了便于阅读）

@Component({
    selector: 'app-intro-form',
    templateUrl: './intro-form.component.html',
    providers: [MatDialogWrapperService],
    styleUrls: ['./intro-form.component.scss']
})

  constructor(private modalService: MatDialogWrapperService ) {
  }

  modalCall() {
    this.modalService.open(ModalFormComponent, {
        width: '500px'
  });
}

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

未处理的承诺拒绝：StaticInjectorError（AppModule）[   MatDialogWrapperService-> MatDialog]：StaticInjectorError（平台：   核心）[MatDialogWrapperService-> MatDialog]：

NullInjectorError：MatDialog没有提供程序！ ;区域：任务：   然后承诺;值：错误：StaticInjectorError（AppModule）[   MatDialogWrapperService-> MatDialog]：StaticInjectorError（平台：   核心）[MatDialogWrapperService-> MatDialog]：

我以为我已经将MatDialog正确地注入了包装服务中？我究竟做错了什么？

谢谢。

Answer 1

此错误表示您尚未在应用程序中包括“材质对话框”模块，因此没有提供程序。

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

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

为将来参考，您需要包括用于任何所用材料组件的模块。查看每个文档，以找出您需要的模块（尽管大多数都是自我解释）

Answer 2

供将来参考：如果有人在测试时偶然发现了这个问题，请将 MatDialogModule 添加到测试导入中。

beforeEach(async () => {
  TestBed.configureTestingModule({
    imports: [
      MatDialogModule,
    ],
...

Answer 3

指定全局配置默认值可以通过在应用程序的根模块中为MAT_DIALOG_DEFAULT_OPTIONS提供MatDialogConfig的实例来指定默认对话框选项。

@NgModule({
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ]
})

NullInjectorError：没有MatDialog提供程序-尝试为MatDialog创建包装器服务

3 个答案: