如何使 mat-dialog 中的按钮也能在 Enter 上工作？

如何解决如何使 mat-dialog 中的按钮也能在 Enter 上工作？

我有一个 mat-dialog-Box，点击事件会关闭对话框，但我希望它也能在 Enter 按下时工作。有什么办法吗？

我尝试过使用表单，但没有奏效。以下是我尝试使用的解决方案：

HTML

<form (submit)="doAction()">
   <button type="submit">Add</button>
</form>

TS

doAction() {
  this.dialogRef.close({ event: this.action,data: this.local_data });
}

但是 Enter 事件没有发生，尽管点击它正在提交数据。如果我采用上述 HTML 方法，也适用于普通表单（不在对话框中）在 Enter 上工作。

有人可以提出这个问题吗？

解决方法

在你的对话框组件中添加一个 HostListener，像这样（一个完整但简单的组件）：

一个完整的工作示例 here。

HTML

<p>
my-dialog works!
</p>

<form (submit)="close()">
  <input type="text">
   <button type="submit">Add</button>
</form>

<button mat-button (click)="close()">Close</button>

TS

import { Component,HostListener,OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-my-dialog',templateUrl: './my-dialog.component.html',styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<MyDialogComponent>) { }

  @HostListener('window:keyup.Enter',['$event'])
  onDialogClick(event: KeyboardEvent): void {
    this.close();
  }
}

ngOnInit() {
}

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

}

,

无论您希望在单击“Enter”按钮时调用函数的位置，只需将此事件与（单击）事件一起添加

(keypress.enter)="yourFunction($event)"

这很完美。

按钮工作的实际键盘事件是通过单击空格键。

如果你的需求肯定是回车按钮，那么添加

(keypress.enter)="yourFunction($event)" 

否则只需添加

(keypress)="yourFunction($event)"

Keypress 事件适用于 keyUp 和 keyDown 事件。仅供参考