"Brak dostawcy dla MdDialogRef!"

Question

Załóżmy, że mam ten składnik:

@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>) { } 
} 

Już importowane MdDialog do mojego modułu aplikacji:

@NgModule({ 
    imports: [ 
    BrowserModule, 
    MaterialModule.forRoot(), 
    MdDialogModule.forRoot(), 
    ], 
    ... 
}) 

Dlaczego otrzymuję ten błąd?

Brak dostawcy dla MdDialogRef!

Answer 1

Możesz próbowali użyć komponentu dialogowe w szablonie jak ten:

<pizza-dialog ...></pizza-dialog> 

usunąć ten od szablonu i otworzyć okno, używając MdDialog.open() jak to się dzieje tutaj:

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

Ten kod został skopiowany z: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

Answer 2

nie musi zmienić realizacja. Możesz dostarczyć makiety dla MdDialogRef. w poniższym przykładzie I fałszywy MdDialogRef z MdDialogRefMock klasy i zarejestrować go w dostawców rozdział:

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

Jeśli używasz jaśmin, można również stworzyć Spy zamiast tworzenia Fake- klasa:

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

Answer 3

Usuń <pizza-dialog ...></pizza-dialog> z szablonu, to wymagają przycisk, który otworzy Dialong tylko dlatego, że w kodzie ustawić relację z okna.