Angular 如何使mat对话框中的按钮也在Enter上工作？

我有一个

mat对话框

，点击事件时它会关闭对话框，但我希望它也能在回车键上工作。有什么办法吗

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

HTML

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

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

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

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

但是Enter事件没有发生，尽管它正在提交数据。如果我采用上面的HTML方法，那么对于普通表单（不在对话框中）也可以使用Enter-press

---

有人能提出这个问题吗？

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

一个完整的工作示例

HTML

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

<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

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

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

从'@angular/core'导入{Component，HostListener，OnInit}；
从“@angular/material/dialog”导入{MatDialogRef}；
@组成部分({
选择器：“应用程序我的对话框”，
templateUrl:“./my dialog.component.html”，
样式URL:['./my dialog.component.css']
})
导出类MyDialogComponent实现OnInit{
构造函数（私有dialogRef:MatDialogRef）{}
@HostListener（'窗口：keyup.Enter'，['$event']））
onDialogClick（事件：键盘事件）：无效{
这个。关闭（）；
}
}
恩戈尼尼特（）{
}
close（）：void{
此.dialogRef.close（true）；
}

---

}

在对话框组件中添加一个主机侦听器，如下所示（完整但简单的组件）：

一个完整的工作示例

HTML

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

<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

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

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

从'@angular/core'导入{Component，HostListener，OnInit}；
从“@angular/material/dialog”导入{MatDialogRef}；
@组成部分({
选择器：“应用程序我的对话框”，
templateUrl:“./my dialog.component.html”，
样式URL:['./my dialog.component.css']
})
导出类MyDialogComponent实现OnInit{
构造函数（私有dialogRef:MatDialogRef）{}
@HostListener（'窗口：keyup.Enter'，['$event']））
onDialogClick（事件：键盘事件）：无效{
这个。关闭（）；
}
}
恩戈尼尼特（）{
}
close（）：void{
此.dialogRef.close（true）；
}

---

}

如果您希望函数在单击“回车”按钮时调用，只需将此事件与（单击）事件一起添加即可

这很好用

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

如果您的要求是“确定输入”按钮，则添加

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

否则，只需添加

(keypress)="yourFunction($event)"

---

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

如果您希望函数在单击“回车”按钮时调用，只需将此事件与（单击）事件一起添加即可

这很好用

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

如果您的要求是“确定输入”按钮，则添加

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

否则，只需添加

(keypress)="yourFunction($event)"

---

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

keypress。输入

我使用过，但不知道为什么它不起作用，但公认的解决方案对我来说非常有效。我不确定您使用的是什么样的按键。输入。如果我看到代码，我可能可以帮助您。

keypress.enter

我曾经使用过，但不知道为什么它不起作用，但接受的解决方案对我来说非常有效。我不确定您到底是如何使用

keypress.enter

。如果我看到代码，我可能可以帮助您。如果您可以选中仅输入键，请使用

@HostListener（'window:keydown.enter'，['$event']）

@Eliseo您是对的。谢谢。如果您可以选中“仅输入密钥使用”

@HostListener（'window:keydown.enter'，['$event']）

@Eliseo，您是正确的。谢谢