angular - 如何在Angular对话框材料中按转义键实现优雅关闭的表单?
问题描述
我有一个对话框表单,我希望在用户按下转义键时优雅地关闭它。当用户点击转义键时,表单会立即关闭,但由于某种原因,对话框表单不会将结果发送到父表单。
通过取消按钮完成关机时没有问题。
我已经在userform
组件上使用“onKey”事件进行了尝试,但这也不起作用。
在我的打字稿和模板对话框文件中:
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
constructor(
private dialogRef: MatDialogRef<UpdateBonusConditieComponent>,
@Inject(MAT_DIALOG_DATA) private PassedData: ConditieTypeDialog,
) {} // I also tried it with a public PassedData instead of private
onCancel() {
console.log('komt ie hier');
this.PassedData.cancel = true;
}
onKey(event: any) {
this.onCancel();
console.log('toets ingedrukt ' + event.target);
}
onOK() {
console.log('OK button pressed');
}
<mat-dialog-content [formGroup]="dialogConditieForm"
(keyup)="onKey($event)">
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button
color="accent"
(click)="onOK()"
[mat-dialog-close]="PassedData"
[disabled]="dialogConditieForm.invalid">Ok</button>
<button mat-button
color="warn"
(click)="onCancel()"
[mat-dialog-close]="PassedData">Cancel</button>
</mat-dialog-actions>
然后我有我调用对话框的父表单,一些细节:
import { MatDialog } from '@angular/material';
constructor(private matDialog: MatDialog) {}
const dialogRef = this.matDialog.open(UpdateBonusConditieComponent, {
data: {
onderwerpGUI: onderwerpGUI,
isNewRow: isNewRow,
cancel: false,
}
});
dialogRef.afterClosed().subscribe((result: ConditieTypeDialog) => {
if (result.cancel) { //when hitting escape result is undefined for some reason
this.selectedRow = null;
return 0;
}
});
我应该期待返回结果,以便将其this.selectedRow
设置为,null
但如果使用转义键关闭对话框表单,则不会发生这种情况。
我想我做错了什么。任何人都可以帮助我吗?
解决方案
对话框表单未发送结果,因为该onKey
函数从未被调用。您可以改为订阅keyboardEvents
inMatDialogRef
并onCancel
在Escape
单击时调用。我还为backdropClick
所需的内容添加了相同的内容。
constructor(
private dialogRef: MatDialogRef<UpdateBonusConditieComponent>,
@Inject(MAT_DIALOG_DATA) private passedData: ConditieTypeDialog,
) { }
ngOnInit() {
this.dialogRef.keydownEvents().subscribe(event => {
if (event.key === "Escape") {
this.onCancel();
}
});
this.dialogRef.backdropClick().subscribe(event => {
this.onCancel();
});
}
onCancel(): void {
this.passedData.cancel = true;
this.dialogRef.close(this.passedData);
}
onOK() {
console.log('OK button pressed');
}
此外,按照惯例,变量名使用 camelCase ( passedData
)。
推荐阅读
- python - 通过 Python 在 Midi 的特定时间写笔记
- c++ - 读取整数并用它们填充二维数组的函数
- node.js - React Electron ffmpeg-extract-frames 构建错误
- c - C 编程 - 在 main() 之外的函数中收集数据
- oracle - csv 导入 Oracle 表 - 无效数字错误
- build - 如何从 BUILD 文件下载 Bazel 中的文件?
- javascript - JavaScript中嵌套数组的顺序添加
- javascript - 我如何设置间隔不是在第一次加载而是在第二次加载和之后加载
- c++ - 使用不可复制对象的向量
- android - 没有安装应用程序的手机通知?