我正在尝试使用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;
}
}
创建在职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
作为参考,我有代码
1 回答
您似乎忘记在构造函数中添加MAT_DIALOG_DATA的注入器:
在 CreateJobTemplateComponent 中,您需要导入MAT_DIALOG_DATA:
并且构造函数应该是: