在 Angular 中将事件绑定到 DOM 元素

在 Angular 中，我们可以使用事件绑定来监听 DOM 元素的各种事件，并在事件触发时执行我们的逻辑。下面我们将介绍如何在 Angular 中将事件绑定到 DOM 元素。

基础用法

在 Angular 中，我们使用 () 符号来表示事件绑定。例如，我们要监听按钮的 click 事件，可以在按钮的标签中加上 click 事件绑定：

<button (click)="handleClick()">Click me</button>

这里的 (click) 是事件绑定的语法，等价于原生 JavaScript 中的 button.onclick = handleClick。当按钮被点击时，handleClick 方法就会被调用。

事件绑定参数

有些事件需要传递参数才能正确监听，比如 keyup 事件。在 Angular 中，我们可以使用 $event 变量来传递事件参数。例如，我们要监听输入框的 keyup 事件，并打印输入框的值，可以这样写：

<input (keyup)="handleKeyup($event)">

在 handleKeyup 方法中，我们可以通过 $event.target.value 获取输入框的值。

快捷键绑定

有些场景下，我们需要监听快捷键按下事件，例如监听 CTRL+S 快捷键保存数据。在 Angular 中，我们可以使用 HostListener 装饰器来监听快捷键按下事件。例如，我们要监听 CTRL+S 快捷键按下时保存数据，可以这样写：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<button>Save (CTRL+S)</button>'
})
export class AppComponent {
  @HostListener('document:keydown.control.s', ['$event'])
  handleSave(event: KeyboardEvent) {
    console.log('Save data.');
    event.preventDefault();
    event.stopPropagation();
  }
}

这里我们在 AppComponent 根组件上使用 @HostListener 装饰器监听 document:keydown.control.s 事件，表示监听 CTRL+S 快捷键按下事件。在 handleSave 方法中，我们可以执行保存数据的逻辑，并调用 event.preventDefault() 和 event.stopPropagation() 阻止浏览器默认行为和事件冒泡。

小结

以上就是在 Angular 中将事件绑定到 DOM 元素的基础用法和高级技巧。通过事件绑定，我们可以很方便地监听各种 DOM 事件，并执行我们的逻辑。