"No provider for MdDialogRef!"
"No provider for MdDialogRef!"
假设我有这个组件:
@Component({
selector: 'pizza-dialog',
template: `
<h1 md-dialog-title>Would you like to order pizza?</h1>
<md-dialog-actions>
<button (click)="dialogRef.close('yes')">Yes</button>
<button md-dialog-close>No</button>
</md-dialog-actions>
`
})
export class PizzaDialog {
constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}
我已经将 MdDialog 导入到我的应用程序模块中:
@NgModule({
imports: [
BrowserModule,
MaterialModule.forRoot(),
MdDialogModule.forRoot(),
],
...
})
为什么我会收到这个错误?
No provider for MdDialogRef!
您可能试过在这样的模板中使用对话框组件:
<pizza-dialog ...></pizza-dialog>
从您的模板中删除它并使用 MdDialog.open() 打开对话框,如下所示:
@Component({
selector: 'pizza-component',
template: `
<button type="button" (click)="openDialog()">Open dialog</button>
`
})
export class PizzaComponent {
dialogRef: MdDialogRef<PizzaDialog>;
constructor(public dialog: MdDialog) { }
openDialog() {
this.dialogRef = this.dialog.open(PizzaDialog, {
disableClose: false
});
this.dialogRef.afterClosed().subscribe(result => {
console.log('result: ' + result);
this.dialogRef = null;
});
}
}
此代码复制自:
https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
您不得更改您的实现。
您可以为 MdDialogRef 提供 Mock。
在下面的示例中,我使用 MdDialogRefMock class 伪造 MdDialogRef,并将其注册到 providers 部分:
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { MessageBoxYesNoComponent } from "./message-box-yes-no.component";
import { MdDialogRef } from "@angular/material";
class MdDialogRefMock {
}
describe("MessageBoxYesNoComponent", () => {
let component: MessageBoxYesNoComponent;
let fixture: ComponentFixture<MessageBoxYesNoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MessageBoxYesNoComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
],
providers: [
{ provide: MdDialogRef, useClass: MdDialogRefMock }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MessageBoxYesNoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it("should create", () => {
expect(component).toBeTruthy();
});
});
如果您使用的是 Jasmine,您还可以创建一个 Spy 而不是创建 Fake-Class:
let mdDialogSpy = jasmine.createSpy('MdDialogRef');
从模板中删除<pizza-dialog ...></pizza-dialog>
,它只需要打开对话框的按钮,因为在代码中您设置了与对话框的关系。
将 MdDialogRef
添加到您的模块的提供商
假设我有这个组件:
@Component({
selector: 'pizza-dialog',
template: `
<h1 md-dialog-title>Would you like to order pizza?</h1>
<md-dialog-actions>
<button (click)="dialogRef.close('yes')">Yes</button>
<button md-dialog-close>No</button>
</md-dialog-actions>
`
})
export class PizzaDialog {
constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}
我已经将 MdDialog 导入到我的应用程序模块中:
@NgModule({
imports: [
BrowserModule,
MaterialModule.forRoot(),
MdDialogModule.forRoot(),
],
...
})
为什么我会收到这个错误?
No provider for MdDialogRef!
您可能试过在这样的模板中使用对话框组件:
<pizza-dialog ...></pizza-dialog>
从您的模板中删除它并使用 MdDialog.open() 打开对话框,如下所示:
@Component({
selector: 'pizza-component',
template: `
<button type="button" (click)="openDialog()">Open dialog</button>
`
})
export class PizzaComponent {
dialogRef: MdDialogRef<PizzaDialog>;
constructor(public dialog: MdDialog) { }
openDialog() {
this.dialogRef = this.dialog.open(PizzaDialog, {
disableClose: false
});
this.dialogRef.afterClosed().subscribe(result => {
console.log('result: ' + result);
this.dialogRef = null;
});
}
}
此代码复制自: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
您不得更改您的实现。 您可以为 MdDialogRef 提供 Mock。 在下面的示例中,我使用 MdDialogRefMock class 伪造 MdDialogRef,并将其注册到 providers 部分:
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { MessageBoxYesNoComponent } from "./message-box-yes-no.component";
import { MdDialogRef } from "@angular/material";
class MdDialogRefMock {
}
describe("MessageBoxYesNoComponent", () => {
let component: MessageBoxYesNoComponent;
let fixture: ComponentFixture<MessageBoxYesNoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MessageBoxYesNoComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
],
providers: [
{ provide: MdDialogRef, useClass: MdDialogRefMock }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MessageBoxYesNoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it("should create", () => {
expect(component).toBeTruthy();
});
});
如果您使用的是 Jasmine,您还可以创建一个 Spy 而不是创建 Fake-Class:
let mdDialogSpy = jasmine.createSpy('MdDialogRef');
从模板中删除<pizza-dialog ...></pizza-dialog>
,它只需要打开对话框的按钮,因为在代码中您设置了与对话框的关系。
将 MdDialogRef
添加到您的模块的提供商