"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

आप बदल नहीं होना चाहिए अपने कार्यान्वयन। आप MdDialogRef के लिए एक मॉक प्रदान कर सकते हैं। निम्न उदाहरण मैं नकली में MdDialogRefMock वर्ग के साथ MdDialogRef और प्रदाताओं में यह रजिस्टर अनुभाग:

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

आप जैस्मीन का उपयोग कर रहे हैं, तो आप भी एक जासूस के बजाय Fake- बनाने का बना सकते हैं कक्षा:

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

Answer 3

टेम्पलेट से निकालें <pizza-dialog ...></pizza-dialog>, यह केवल बटन कि Dialong खोलने क्योंकि कोड में आप संवाद के साथ संबंध की स्थापना की आवश्यकता होती है।