"Kein Anbieter für MdDialogRef!"

Question

Angenommen, ich habe diese Komponente:

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

Ich habe schon MdDialog in meine App-Modul importiert:

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

Warum sollte ich diesen Fehler?

Kein Anbieter für MdDialogRef!

Answer 1

Sie haben versucht, können Sie Ihre Dialogkomponente in einer Vorlage wie folgt zu verwenden:

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

, dass aus Ihrer Vorlage löschen und den Dialog öffnen mit MdDialog.open(), wie hier geschehen ist:

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

Dieser Code wurde kopiert: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

Answer 2

Sie ändern müssen nicht Ihre Implementierung. Sie können einen Mock für den MdDialogRef bereitstellen. Im gefälschten folgende Beispiel ich die MdDialogRef mit der MdDialogRefMock Klasse und es in dem Anbieter Abschnitt registrieren:

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

Wenn Sie Jasmine verwenden, können Sie auch einen Spion erstellen, anstatt die Fake- schaffen Klasse:

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

Answer 3

<pizza-dialog ...></pizza-dialog> aus der Vorlage entfernen, sie benötigen nur den Knopf, der die Dialong öffnen, weil in dem Code, den Sie die Beziehung mit dem Dialog gesetzt.