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

江小虫儿

于 2022-01-03 13:32:32 发布

阅读量1.9k

点赞数

分类专栏： Angular 前端开发文章标签： angular.js typescript javascript

本文链接：https://blog.csdn.net/kate_sicheng/article/details/122285251

版权

本文详细介绍了Angular中用于组件间通信的EventEmitter类，以及如何使用@Output装饰器将数据从子组件发送到父组件。同时讨论了父组件如何通过@Input修饰的属性修改子组件数据，并分析了监视@Input()变化的两种方法：setter拦截器和OnChanges生命周期钩子。此外，还提到了ngOnChanges钩子和SimpleChanges对象在变更检测中的作用。

摘要由CSDN通过智能技术生成

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 '@angular/core';
export class ItemOutputComponent {
   
  /**
   * @Output() -  一个装饰器函数，它把该属性标记为数据从子组件进入父组件的一种途径
   * newItemEvent - 这个 @Output() 的名字
   * EventEmitter<string> - 这个 @Output() 的类型
   * new EventEmitter<string>() - 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
   */
  @Output() newItemEvent =