Angular中的 EventEmitter、@Output、@Input、OnChanges

EventEmitter 类

EventEmitter用在带有 @Output 指令的组件中，以同步或异步方式发出自定义事件，并通过订阅实例来为这些事件注册处理器。

// EventEmitter类 继承自Rxjs的Subject。（EventEmitter 类派生自 Observable。）
class EventEmitter<T> extends Subject<T> {
   

  /**
   * 构造函数，用于创建此类的实例，该实例可以同步或异步发送事件。
   * isAsync 默认值为false，表示同步传递事件。为 true 时，异步传递事件。
   * 泛型T，表示要发射的值和被订阅的值类型
   */
  constructor(isAsync?: boolean): EventEmitter<T>
  
  // 发出包含给定值的事件。value为要发出的值，类型为T。
  emit(value?: T): void
  
  // 注册此实例发出的事件的处理器。
  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription
  
}

使用 EventEmitter 自定义事件

Directives(指令) 通常使用 Angular 的 EventEmitter 引发自定义事件：

• 该指令创建一个 EventEmitter 并将其对外暴露为属性。
• 该指令调用 EventEmitter.emit(data) 发出事件，传入消息数据，该消息数据可以是任何东西。
• 父指令通过绑定到该属性来监听事件，并通过传入的 $event 对象接收数据。

子组件把数据发送到父组件 @Output、EventEmitter

@Output() 在子组件中标记了一个属性，作为数据从子组件传递到父组件的途径。

子组件使用 @Output() 属性来引发事件，以通知父组件这一变化。为了引发事件， @Output() 必须是 EventEmitter 类型，它是 @angular/core 中用来发出自定义事件的类。

// 子组件
import {
    Output, EventEmitter } from '@