本文介绍了角度材料没有 MatDialog 的提供者!错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am trying to use the Angular material module to open a model on click of a button. I have followed the example as suggested in the https://material.angular.io/components/dialog/examples.

但是,我看到尝试运行应用程序时,我看到以下错误 -

However, I see that as try to run the application, I see the following error -

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

app.module.ts

我已经导入了 MatDialogModule 并将其放在导入中.在Entry组件中,我添加了需要在modal中渲染的组件.

I have imported the MatDialogModule and also placed the same in the imports.Within the Entry components, I have added the component that needs to be rendered in the modal.

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 中的代码

Code in job-templates.component.ts

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

This is the file which is responsible for invoking the model on click of a button added to its template.

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

}

创建作业模板.component.ts

create-job-template.component.ts

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

This component will render itself in the modal dialog.

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 的.

Can anyone let me know where I am going wrong here? Most of the errors that I have looked for talk about failure to Inject MatDialogRef, but I find this error for MatDialog.

我也浏览了这个博客,以确保我遵循了相同的步骤.https://blog.thoughtram.io/angular/2017/11/13/easy-dialogs-with-angular-material.html

Also I was looking through this blog as well to make sure I followed the same steps.https://blog.thoughtram.io/angular/2017/11/13/easy-dialogs-with-angular-material.html

供参考,我有代码在

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

推荐答案

遇到了同样的错误.原来我正在导入

Had the same error.Turns out I was importing

从 '@angular/material' 导入 { MatDialog };

应该是

从 '@angular/material/dialog' 导入 { MatDialog };

这篇关于角度材料没有 MatDialog 的提供者!错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-29 16:02
查看更多