No provider for MatDialogRef
我正在使用材料2版本2.0.0-beta.12。 我需要调整材料模态的位置。 我按照这个答案来做。 https://stackoverflow.com/a/44238699/8253445由于MdDialog现在不可用,因此我使用了{MatDialog,MatDialogRef,MAT_DIALOG_DATA}。
1 | constructor(public dialog: MatDialog,public dialModRef:MatDialogRef) {} |
当我将MatDialogRef添加到构造函数中时,它给我"没有MatDialogRef提供程序"错误。 请您帮我弄清楚吗?
dialog-overview-example.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import {Component, Inject} from '@angular/core'; import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; @Component({ selector: 'dialog-overview-example', templateUrl: 'dialog-overview-example.html' }) export class DialogOverviewExample { animal: string; name: string; constructor(public dialog: MatDialog,public dialModRef:MatDialogRef) {} openDialog(): void { let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '500px', data: { name: this.name, animal: this.animal } }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); this.animal = result; }); } } @Component({ selector: 'dialog-overview-example-dialog', templateUrl: 'dialog-overview-example-dialog.html', }) export class DialogOverviewExampleDialog { constructor( public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) public data: any) { } onNoClick(): void { this.dialogRef.close(); } } |
app.module.ts
1 | entryComponents: [DialogOverviewExample,DialogOverviewExampleDialog] |
dialog-overview-example-dialog.html
1 2 3 4 5 6 7 8 9 10 11 12 | <h1 md-dialog-title>Hi {{data.name}} <p> What's your favorite animal? </p> <md-form-field> <input mdInput tabindex="1" [(ngModel)]="data.animal"> </md-form-field> <button md-button tabindex="2">Ok</button> <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button> |
你会得到确切的
No provider for
MatDialogRef
如果您在
不需要这样做,不要在任何地方包含对话框组件的html选择器。
您需要将此模块导入模块文件(默认为
1 | import { MatDialogModule } from '@angular/material'; |
并在模块声明中将
1 2 3 4 5 6 7 8 9 10 11 | @NgModule({ declarations: [...], imports: [ ... MatDialogModule, ... ], providers: [...], entryComponents: [...], bootstrap: [...] }) |
编辑:
您需要通过
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @Component({ selector: 'dialog-overview-example-dialog', templateUrl: 'dialog-overview-example-dialog.html', }) export class DialogOverviewExampleDialog { someValue: boolean = false; constructor( public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) public data: any) { } onNoClick(): void { this.dialogRef.close(this.someValue); } } |
2019年9月更新
许多Angular Material示例将
1 | import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
这将导致以下错误(例如,在创建服务以包装对话框组件的创建时):
1 2 3 | ERROR NullInjectorError: StaticInjectorError(AppModule)[DialogComponent -> MatDialogRef]: StaticInjectorError(Platform: core)[DialogWarningComponent -> MatDialogRef]: NullInjectorError: No provider for MatDialogRef! |
正确导入:'@ angular / material'
1 | import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; |
material.module.ts
如果角度材质
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { NgModule } from '@angular/core'; import { CdkTableModule } from '@angular/cdk/table'; import { CdkTreeModule } from '@angular/cdk/tree'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; import { MatAutocompleteModule, MatBadgeModule, ... MatDialogModule, ... } from '@angular/material'; @NgModule({ exports: [ CdkTableModule, CdkTreeModule, DragDropModule, ScrollDispatchModule, MatAutocompleteModule, MatBadgeModule, ... MatDialogModule, ... ] }) export class MyMaterialModule { } |
问题是您将
从DialogOverviewExample组件中删除MatDialogRef。您在那里不需要它。那应该可以了。
您将
只能将