沒有MatDialogRef的供應商

我正在使用material 2 version 2.0.0-beta.12。我需要調整材質Modal的位置。我遵循這個答案來做到這一點。 https://stackoverflow.com/a/44238699/8253445由於MdDialog現在不可用，我使用{MatDialog，MatDialogRef，MAT_DIALOG_DATA}。沒有MatDialogRef的供應商

constructor(public dialog: MatDialog,public dialModRef:MatDialogRef<any>) {}

當我將MatDialogRef添加到我的構造函數時，它給了我「沒有MatDialogRef的提供者」錯誤。請你能幫我弄清楚這一點嗎？

對話框的概述，example.ts

import {Component, Inject} from '@angular/core'; 
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from 
'@angular/material'; 

@Component({ 
    selector: 'dialog-overview-example', 
    templateUrl: 'dialog-overview-example.html' 
}) 
export class DialogOverviewExample { 

    animal: string; 
    name: string; 

    constructor(public dialog: MatDialog,public 
    dialModRef:MatDialogRef<any>) {} 

    openDialog(): void { 
     let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { 
     width: '500px', 
     data: { name: this.name, animal: this.animal } 
    }); 

    dialogRef.afterClosed().subscribe(result => { 
     console.log('The dialog was closed'); 
     this.animal = result; 
    }); 
} 
} 

@Component({ 
    selector: 'dialog-overview-example-dialog', 
    templateUrl: 'dialog-overview-example-dialog.html', 
}) 
export class DialogOverviewExampleDialog { 

constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, 
@Inject(MAT_DIALOG_DATA) public data: any) { } 

onNoClick(): void { 
    this.dialogRef.close(); 
} 

}

app.module.ts

entryComponents: [DialogOverviewExample,DialogOverviewExampleDialog]

對話框的概述 - 例如，dialog.html

<h1 md-dialog-title>Hi {{data.name}}</h1> 
<div md-dialog-content> 
    <p>What's your favorite animal?</p> 
    <md-form-field> 
    <input mdInput tabindex="1" [(ngModel)]="data.animal"> 
    </md-form-field> 
</div> 
<div md-dialog-actions> 
    <button md-button tabindex="2">Ok</button> 
    <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button> 
</div>

來源

2017-10-11 kashif roshen

而不是'any'，給出想要在對話框中打開的Component類的名稱。然後，在您的entryComponents中添加組件類。 – Faisal

我現在這樣做..我仍然得到相同的錯誤:( –

您需要導入這個模塊在你的模塊文件中（默認爲app.module.ts）：

import { MatDialogModule } from '@angular/material';

，並在你的模塊聲明添加到MatDialogModuleimports：

@NgModule({ 
    declarations: [...], 
    imports: [ 
    ... 
    MatDialogModule, 
    ... 
    ], 
    providers: [...], 
    entryComponents: [...], 
    bootstrap: [...] 
})

編輯：

您需要通過this.dialogRef.close();將數據傳遞給獲得result在subscribe工作。例如：

@Component({ 
    selector: 'dialog-overview-example-dialog', 
    templateUrl: 'dialog-overview-example-dialog.html', 
}) 
export class DialogOverviewExampleDialog { 
someValue: boolean = false; 

constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, 
@Inject(MAT_DIALOG_DATA) public data: any) { } 

onNoClick(): void { 
    this.dialogRef.close(this.someValue); 
} 

}

來源

2017-10-11 11:04:22

我導入模塊和對話框工作時，我從構造函數中刪除MatDialogRef ..我想知道爲什麼它停止工作時，我導入:( –

@ kashifroshen你在模塊聲明中添加了你的組件（你在哪裏導入'MatDialogRef'）到'entryComponents'？ –

是的，我也這麼做了：/：/ –

從DialogOverviewExample組件中刪除MatDialogRef。你不需要它。它應該工作。

來源

2017-11-30 14:51:08 Scharlo

你會得到確切

無提供MatDialogRef

錯誤的情況下，您在dialog-overview-example.html像<dialog-overview-example-dialog></dialog-overview-example-dialog>

沒有必要爲你的對話框的組件html選擇，不要在任何地方包含對話框組件的html選擇器。

來源

2017-12-13 13:31:57

問題在於，您將代碼<dialog-component></dialog-component>包含在代碼中，並使用@Inject將其注入到您的視圖中。如果您從您所使用的template.html中刪除<dialog-component></dialog-component>，它將起作用！

來源

2018-03-07 19:48:36

沒有MatDialogRef的供應商

回答

相關問題