Question

我正在尝试使用Angular材质模块在单击按钮时打开模型。我按照https://material.angular.io/components/dialog/examples中的建议按照示例进行了操作。

但是，我发现在尝试运行应用程序时，我看到以下错误 -

errors.js:48 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[MatDialog]: 
  StaticInjectorError[MatDialog]: 
    NullInjectorError: No provider for MatDialog!
Error: StaticInjectorError[MatDialog]: 
  StaticInjectorError[MatDialog]: 
    NullInjectorError: No provider for MatDialog!
    at _NullInjector.get (injector.js:31)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveNgModuleDep (ng_module.js:103)
    at NgModuleRef_.get (refs.js:1037)
    at resolveDep (provider.js:455)
    at _NullInjector.get (injector.js:31)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveNgModuleDep (ng_module.js:103)
    at NgModuleRef_.get (refs.js:1037)
    at resolveDep (provider.js:455)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (ng_zone.js:575)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)
defaultErrorLogger @ errors.js:48

我有以下项目文件的设置

app.module.ts

我已导入MatDialogModule并在导入中也放置了相同的内容。在Entry组件中，我添加了需要在模态中呈现的组件。

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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, NgbModule.forRoot(), ReactiveFormsModule, 
                  HttpClientModule, routing, MatTabsModule, MatDialogModule ],
  declarations: [ AppComponent, AppHeaderComponent, SignInComponent, RecruitmentHomeComponent, JobTemplatesComponent, CreateJobTemplateComponent ],
  bootstrap:    [ AppComponent ],
  entryComponents: [CreateJobTemplateComponent],
  providers: [AuthGuard, UserService, AuthenticationService]
})

job-templates.component.ts中的代码

这是负责在点击添加到其模板的按钮时调用模型的文件。

import { Component, OnInit } from '@angular/core';
import { CreateJobTemplateComponent } from './create-job-template/create-job-template.component';
import { MatDialog } from '@angular/material';


@Component({
  selector: 'app-job-templates',
  templateUrl: './job-templates.component.html',
  styleUrls: ['./job-templates.component.css']
})
export class JobTemplatesComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  ngOnInit() {
  }

  createjobtemplate(){
    let dialogRef = this.dialog.open(CreateJobTemplateComponent, {
      width: '250px'
    });
    //Set the dialogRef property of opened dialog with the obtained ref
    dialogRef.componentInstance.dialogRef = dialogRef;
  }

}

create-job-template.component.ts

此组件将在模态对话框中呈现自己。

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-create-job-template',
  templateUrl: './create-job-template.component.html',
  styleUrls: ['./create-job-template.component.css']
})
export class CreateJobTemplateComponent implements OnInit {

  form: FormGroup;

  constructor(private formBuilder: FormBuilder, public dialogRef: MatDialogRef<CreateJobTemplateComponent>) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      filename: ''
    })
  }

  submit(form) {
    this.dialogRef.close(`${form.value.filename}`);
  }

}

任何人都可以让我知道我在哪里错了吗？我查找的大多数错误都是关于Inject MatDialogRef的失败，但是我发现MatDialog有这个错误。

此外，我也在浏览此博客，以确保我遵循相同的步骤。 https://blog.thoughtram.io/angular/2017/11/13/easy-dialogs-with-angular-material.html

作为参考，我有

的代码

https://stackblitz.com/edit/angular-fhhmff

Answer 1

有相同的错误。原来我正在导入

import { MatDialog } from '@angular/material';

应该是

import { MatDialog } from '@angular/material/dialog';

Answer 2

这是针对Angular 9 / Angular材质9

正如泰迪熊所说：

import { MatDialog } from '@angular/material';

应该是

import { MatDialog } from '@angular/material/dialog';

我必须重新启动Angular Live Development Server才能解决该错误。

我看到的另一个常见问题是MatDialogModule导入（您有）中缺少AppModule，因为错误与此相同。

此外，您不再需要entryComponents中的AppModule

Answer 3

您似乎忘记了在构造函数中添加MAT_DIALOG_DATA的注入器：

@Inject（MAT_DIALOG_DATA）公开数据：任意

在 CreateJobTemplateComponent 中，您需要导入MAT_DIALOG_DATA：

import { MAT_DIALOG_DATA } from '@angular/material';

，构造函数应为：

    constructor(@Inject(MAT_DIALOG_DATA) public data: any,
                private formBuilder: FormBuilder,
                public dialogRef: MatDialogRef<CreateJobTemplateComponent>) { }

Answer 4

我的建议是简化使用以下模式实例化对话框的方式。使用这种模式，“父”组件是唯一需要了解管理对话框的组件。模板文件如下所示：

<ng-template #dialog_template>
    <app-the-dialog
        [input_data]="data"
        (ok)="onSelect($event)"
        (cancel)="onCancel()">
    </app-the-dialog>
</ng-template>

<div>
    <button (click)="openDialog()">Open Dialog</button>
    <!-- Everything else in the template goes here -->
</div>

父组件对对话框进行如下管理：

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { TheDialogComponent } from './the-dialog.component';

@Component({ ... })
export class YourComponent {
    @ViewChild('dialog_template', {static: true }) private dialog_template: TemplateRef<any>;
    private dialogRef: MatDialogRef<TheDialogComponent>;

    constructor(
        public dialog: MatDialog,
    ) { }

    public openDialog(): void {
        this.dialogRef = this.dialog.open(this.dialog_template, {
            width: '85%',
            height: '85%'
        });
    }

    public onSelect(data_emitted_from_dialog: any): void {
        // ...Respond to OK event...
        this.dialogRef.close();
    }

    public onCancel(): void {
        // ...Respond to Cancel event...
        this.dialogRef.close();
    }
}

您可以独立于其调用者开发TheDialogComponent，并且组件结构看起来完全像一个典型的组件，而没有特殊的语法/意识，因为它是一个对话框。

我与这个同样的NullInjectorError: No provider for MatDialogRef!错误进行了数小时的抗争，直到发现上面的模式。 MatDialog docs官方让我感到生气，因为它们看起来如此复杂：建议的语法确实很密集，并且连线跨越三个不同的地方：触发对话框的父组件，该组件是对话框，以及包含模块的entryComponents属性。打开一个简单的对话框应该不难。上面的解决方案更优雅，因为：

对话框组件只是声明@Inputs和@Outputs的组件。没有疯狂的注入语法（constructor(@Inject(MAT_DIALOG_DATA) public data: any)？什么？）只是为了获取数据。
该对话框在“父”组件的模板内声明，就在您希望找到它的位置。（并且在模板中引用对话框组件无需在模块entryComponents上声明它）
在父模板中实例化对话框组件后，标准的Angular [input]和(output)语法直接绑定到父模型，我敢打赌，这是您首先要的。

享受！

angular material没有MatDialog的提供者！错误

4 个答案: