![](/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.