MdDialogRef에 대한 내용이 없습니다.

Question

비슷한 글에서 내 문제가 해결되지 않았으므로이 문제가 다시 발생했습니다.

공식 자습서를 단계별로 수행 한 후에도 'MdDialogRef 공급자가 없습니다'이라는 오류가 있습니다.

두 가지 구성 요소가 있습니다. 첫 번째 구성 요소 :

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 메서드에서 반환 된 참조의 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; 
    }); 
    } 

대화 상자 구성 요소가 여기에 있습니다 : :

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

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

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