![](/img/trans.png)
[英]use component without MatDialog, MatDialogRef<SomeComponent>
[英]how to open MatDialog and pass MatDialogRef
我正在開發一個 angular 應用程序。 我嘗試使用 MatDialog 打開一個對話框並嘗試將其關閉
我以這種方式打開對話框
openDialog(event) {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.position = {
top: bottom + 'px',
right: '0px'
};
dialogConfig.width = '50%';
dialogConfig.height = '590px';
this.dialog.open(UserDialogComponent, dialogConfig);
const dialogRef = this.dialog.open(UserDialogComponent, dialogConfig);
dialogRef.beforeClose().subscribe((result: string) => {
console.log('RIght before close,', result);
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result);
});
}
我在 UserDialogComponent 的構造函數中注入 MatDialogRef:
constructor(
private formBuilder: FormBuilder,
private dialogRef: MatDialogRef<UserDialogComponent>,
@Inject(MAT_DIALOG_DATA) data) {
console.log("Constructor UserDialogComponent START");
console.log(dialogRef);
this.dialogRef = dialogRef;
console.log("Constructor UserDialogComponent END");
}
並關閉對話框,我使用這個 function
close() {
console.log(this.dialogRef);
console.log('CLOSE CLICKED');
this.dialogRef.close(true);
}
但是 this.dialogRef 是一個空的 object 並且當我調用這個 function 時收到以下錯誤
ERROR TypeError: "this.dialogRef.close is not a function"
你可以幫幫我嗎?
你讓我步入正軌
有這個代碼
@Component({
selector: 'app-user-dialog',
templateUrl: './user-dialog.component.html',
styleUrls: ['./user-dialog.component.scss'],
providers: [
{provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }},
{ provide: MatDialogRef, useValue: {} }
]
})
export class UserDialogComponent implements OnInit {
我刪除了
{ provide: MatDialogRef, useValue: {} }
現在它工作正常
刪除this.dialogRef = dialogRef;
並嘗試
@Inject(MAT_DIALOG_DATA) data) {
console.log("Constructor UserDialogComponent START");
console.log(dialogRef);
this.dialogRef = dialogRef; // delete this line
console.log("Constructor UserDialogComponent END");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.