2017-01-11 14 views
13

私は、このコンポーネントがあるとします。"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(), 
    ], 
    ... 
}) 

は、なぜ私はこのエラーが出るのでしょうか?

MdDialogRefの提供元がありません!

あなたは、このようなテンプレートでは、あなたのダイアログコンポーネントを使用しようとした可能性が

答えて

22

:ここで行われているように

<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

+0

これはどのようにhtmlに配置され、ボタンをクリックすることができますか? htmlの右にが必要ですか? – bschmitty

+0

dialogRef.open()は実行時にそれを行います:) –

+0

これは機能します!私たちはこの振る舞いとそれがどのようにして正確に動作するかについて、より多くのドキュメントを必要としています。しかし、これは動作します! – Leo

7

実装。 MdDialogRefにMockを提供できます。 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'); 
0

コードでダイアログとの関係を設定するので、それが唯一のDialongを開くボタンを必要とし、テンプレートから<pizza-dialog ...></pizza-dialog>を削除します。

関連する問題