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

Question

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

我尝试过使用表格，但没有成功。以下是我尝试使用的解决方案：

超文本标记语言

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

TS

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

但是，Enter尽管单击它正在提交数据，但该事件并未发生。也适用于普通形式（不在对话框中）Enter如果我采用上述 HTML 方法，

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

Answer 1

在您的对话框组件中添加一个HostListener，如下所示（一个完整但简单的组件）：

这里有一个完整的工作示例。

超文本标记语言

<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);
}

}