事件发射器在 Angular 中做了什么 - JavaScript

在 Angular 中，事件发射器是一个重要的概念。它允许组件之间通信，并允许子组件向父组件发出事件。

什么是事件发射器？

事件发射器是一种机制，用于在组件之间传递信息。在 Angular 中，它通过一个特殊的类 EventEmitter 来实现。这个类提供了两个主要的方法：emit() 和 subscribe()。

emit() 方法

emit() 方法被用于向其他组件发出事件。当一个组件需要触发某个事件时，它会在组件类中实例化一个 EventEmitter 对象，并调用 emit() 方法来触发该事件。

以下是一个示例：

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="sendEvent()">Send Event</button>
  `
})
export class MyComponent {
  @Output() myEvent = new EventEmitter();

  sendEvent() {
    this.myEvent.emit();
  }
}

在上面的代码中，MyComponent 类定义了一个 myEvent 属性，它是一个 EventEmitter 对象。当按钮被点击时，sendEvent() 方法会调用 emit() 方法来触发 myEvent 事件。

subscribe() 方法

subscribe() 方法用于订阅事件。当一个组件希望接收其他组件发送的事件时，它会在组件类中实例化一个 EventEmitter 对象，并使用 subscribe() 方法订阅它所感兴趣的事件。

以下是一个示例：

import { Component } from '@angular/core';
import { MyComponent } from './my.component';

@Component({
  selector: 'app-parent-component',
  template: `
    <app-my-component (myEvent)="handleEvent()"></app-my-component>
  `
})
export class ParentComponent {
  handleEvent() {
    // 处理事件
  }
}

在上面的代码中，ParentComponent 类订阅了 MyComponent 类中的 myEvent 事件。当 MyComponent 组件触发 myEvent 事件时，ParentComponent 类中的 handleEvent() 方法会被调用。

总结

事件发射器是 Angular 中很重要的一个概念，它允许组件之间通信，并允许子组件向父组件发出事件。 EventEmitter 类和它的 emit() 和 subscribe() 方法，为我们提供了一种方便的机制来实现组件之间的通信。