MdDialogRefの提供元がありません

Question

私は同様の話題で私の問題を解決しなかったので、この問題を再現しました。

私はまだ公式チュートリアルの手順に従った後でも、'MdDialogRefのプロバイダがありません'というエラーがあります。

私は2つのコンポーネントを持っています。第一の成分：

import { MdDialog} from "@angular/material"; 

import { DocumentDialogComponent } from './document-dialog.component';  

@Component({ 
    selector: 'documents-list', 
    template 
}) 
export class DocumentsListComponent { 

    constructor(
    public dialog: MdDialog) { 
    } 

    openFormDialog() { 

    let dialogRef = this.dialog.open(DocumentDialogComponent, 
    { 
    } 
    ); 
    dialogRef.afterClosed().subscribe(result => { 
     this.selectedOption = result; 
    }); 
    } 

私の第二の成分（ダイアログ）：

import { MdDialogRef} from "@angular/material"; 

@Component({ 
selector: 'document-dialog', 
template 
}) 

export class DocumentDialogComponent { 
    constructor(
     public dialogRef: MdDialogRef<DocumentDialogComponent> 
    ) {} 
} 

そして、私のモジュールの設定：

Error in ./DocumentsListComponent class DocumentsListComponent - inline template:0:167 caused by: No provider for MdDialogRef! 

：私はまだエラーを持っているのはなぜ

import { MaterialModule } from "@angular/material"; 
    import { DocumentsListComponent } from './documents-list.component'; 
    import { DocumentDialogComponent } from './document-dialog.component'; 

    imports : [ 
    MaterialModule.forRoot() 
    ], 

    declarations: [ 
     AppComponent, 
     DocumentListComponent, 
     DocumentDialogComponent 
    ], 
    entryComponents: [ 
     AppComponent, 
     DocumentListComponent, 
     DocumentDialogComponent 
    ], 
    providers: [ 
    ], 
    bootstrap: [ 
     AppComponent 
    ] 

Answer 1

テンプレート内の<DocumentsListComponent></DocumentsListComponent>タグを削除しました。

Answer 2

DocumentDialogComponentでcomponentInstanceプロパティを使用してこのエラーを排除できます。

MdDialogRefをコンポーネントに注入するのではなく、openメソッドから返されたreferenceのcomponentInstanceによってプロパティを設定できます。ここで

が修正作業コードです：

import { MdDialog} from "@angular/material"; 

import { DocumentDialogComponent } from './document-dialog.component';  

@Component({ 
    selector: 'documents-list', 
    template 
}) 
export class DocumentsListComponent { 

    constructor(
    public dialog: MdDialog) { 
    } 

    openFormDialog() { 

    let dialogRef = this.dialog.open(DocumentDialogComponent); 

    //set the reference here 
    dialogRef.componentInstance.dRef = dialogRef; 

    dialogRef.afterClosed().subscribe(result => { 
     this.selectedOption = result; 
    }); 
    } 

ダイアログコンポーネントはここにある：あなたが `MaterialModule`をインポートしている

import { MdDialogRef} from "@angular/material"; 

@Component({ 
selector: 'document-dialog', 
template 
}) 

export class DocumentDialogComponent { 
    public dRef:MdDialogRef<DocumentDialogComponent> 
    constructor() {} 
}