Angular4.x Event (DOM事件和自定义事件详解)

在Angular4.x中，事件是很重要的组成部分，它可以监听DOM事件和自定义事件，让我们以更快的速度、更高的效率处理用户交互和数据改变。

监听DOM事件

监听DOM事件是Angular4.x中最基本的事件处理方法。我们可以使用@HostListener装饰器为一个方法绑定一个DOM事件。

例如，我们要实现一个点击按钮后打印“Hello World”的功能。我们可以这样写：

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

@Component({
  selector: 'app-root',
  template: '<button>Click me</button>'
})
export class AppComponent {

  @HostListener('click')
  onClick() {
    console.log('Hello World');
  }

}

在这个示例中，我们使用@HostListener装饰器绑定了一个click事件。当用户点击按钮时，Angular会自动调用onClick方法，并在控制台输出“Hello World”。

除了click事件，我们还可以使用其他事件名称。例如，我们可以监听鼠标悬停事件，并在控制台输出鼠标的位置:

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

@Component({
  selector: 'app-root',
  template: '<div>Hover me</div>'
})
export class AppComponent {

  @HostListener('mousemove', ['$event'])
  onMousemove(event: MouseEvent) {
    console.log(`Mouse position: (${event.clientX},${event.clientY})`);
  }

}

在这个示例中，我们使用@HostListener装饰器绑定了一个mousemove事件，并使用参数$event获取了鼠标事件的详细信息。当用户将鼠标悬停在div上时，Angular会自动调用onMousemove方法，并在控制台输出鼠标的位置。

自定义事件

除了DOM事件，Angular还支持自定义事件。自定义事件可以让我们在组件之间传递数据，从而实现更加复杂的应用程序功能。

为了创建自定义事件，我们需要使用Angular的事件发射器。我们可以在组件中定义一个事件发射器实例，并使用它发射自定义事件。例如，我们要实现一个点击按钮后发射一个自定义事件，并传递一个字符串参数。我们可以这样写：

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

@Component({
  selector: 'app-root',
  template: '<button (click)="handleClick()">Click me</button>'
})
export class AppComponent {

  @Output()
  myEvent = new EventEmitter<string>();

  handleClick() {
    this.myEvent.emit('Hello World');
  }

}

在这个示例中，我们定义了一个名为myEvent的事件发射器，并使用它发射了一个自定义事件。当用户点击按钮时，Angular会自动调用handleClick方法，并发射一个myEvent事件，并传递一个字符串参数“Hello World”。

我们还需要定义另一个组件来监听这个自定义事件。例如，我们要实现一个在控制台输出自定义事件参数的功能。我们可以这样写：

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

@Component({
  selector: 'app-child',
  template: ''
})
export class ChildComponent {

  handleEvent(param: string) {
    console.log(`Event param: ${param}`);
  }

}

在这个示例中，我们定义了一个名为ChildComponent的组件，并在其中定义了一个handleEvent方法，用于获取传递的自定义事件参数。我们还需要在该组件中使用@Input装饰器监听父组件定义的名为myEvent的自定义事件。

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

@Component({
  selector: 'app-root',
  template: '<app-child (myEvent)="child.handleEvent($event)"></app-child>'
})
export class AppComponent {

  constructor(public child: ChildComponent) {}

}

在这个示例中，我们在模板中使用标记定义了一个ChildComponent组件，并使用(myEvent)绑定myEvent事件。在绑定中，我们调用ChildComponent实例的handleEvent方法，并将事件参数传递给它。

总结

在Angular4.x中，事件是很重要的组成部分。我们可以使用@HostListener装饰器监听DOM事件，并使用事件发射器发射自定义事件。利用事件机制，我们可以更高效地处理用户交互和数据改变，并实现更加复杂的应用程序功能。