«Нет провайдера для MdDialogRef!»

Question

Предположим, у меня есть этот компонент:

@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(), 
    ], 
    ... 
}) 

Почему я получаю эту ошибку?

Отсутствует поставщик MdDialogRef!

Answer 1

Вы, возможно, пытались использовать диалоговый компонент в шаблоне, например так:

<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

Answer 2

Вы не должны изменить ваш реализация. Вы можете предоставить Mock для MdDialogRef. В следующем примере I подделать MdDialogRef с MdDialogRefMock класса и зарегистрировать его в поставщиков раздел:

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

Если вы используете Жасмин, вы также можете создать Spy вместо создания Fake- Класс:

let mdDialogSpy = jasmine.createSpy('MdDialogRef'); 

Answer 3

Удалить <pizza-dialog ...></pizza-dialog> из шаблона, он требует только кнопки, открыть Dialong, потому что в коде вы установите связь с диалогом.