TypeScript EventEmitter与angular

1.TypeScript EventEmitter

在 TypeScript 中，EventEmitter 是一个类，它允许您创建自定义事件并触发这些事件。这个类通常用于 Angular 框架中，但也可以在其他需要事件处理的场景中使用。

下面是一个使用 EventEmitter 类的示例代码片段：

import { EventEmitter } from 'events';

// 创建一个新的 EventEmitter 实例
const emitter = new EventEmitter();

// 定义一个事件监听器
function onEvent(data: any) {
  console.log(`Received data: ${data}`);
}

// 注册事件监听器
emitter.on('my-event', onEvent);

// 触发事件
emitter.emit('my-event', 'Hello, World!');

// 移除事件监听器
emitter.off('my-event', onEvent);

在这个示例中，我们首先导入了 EventEmitter 类，然后创建了一个名为 emitter 的新实例。接着，我们定义了一个名为 onEvent 的函数，该函数将作为事件监听器来处理接收到的数据。最后，我们使用 emitter.on() 方法注册事件监听器，使用 emitter.emit() 方法触发事件，并使用 emitter.off() 方法移除事件监听器。

请注意，EventEmitter 类是 Node.js 内置的 events 模块的一部分，因此不需要单独安装任何依赖。如果您需要在浏览器环境中使用类似的功能，可能需要使用不同的库或 API。

2.angular EventEmitter

在 Angular 中，EventEmitter 是一个用于创建和管理自定义事件的工具。它允许您定义一个事件流，并从组件外部触发这些事件。

下面是一个使用 EventEmitter 在 Angular 组件间传递数据的示例代码片段：

1. 在父组件中定义一个输出属性：

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (notifyParent)="onNotify($event)"></app-child>
  `
})
export class ParentComponent {
  @Output() notifyParent: EventEmitter<any> = new EventEmitter();

  onNotify(message: string) {
    console.log(`Received message: ${message}`);
  }
}

在这个示例中，我们定义了一个名为 notifyParent 的输出属性，并将其类型设置为 EventEmitter<any>。这意味着 notifyParent 属性是一个事件发射器，可以用来触发自定义事件。

2. 在子组件中触发事件：

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="onClick()">Click Me</button>
  `
})
export class ChildComponent {
  @Output() notifyParent: EventEmitter<any> = new EventEmitter();

  onClick() {
    this.notifyParent.emit('Message from child component');
  }
}

在这个示例中，我们定义了一个名为 notifyParent 的输出属性，并将其类型设置为 EventEmitter<any>。然后，我们在子组件的模板中添加了一个按钮，当点击该按钮时，会触发 notifyParent 事件，并将消息 'Message from child component' 作为参数传递给父组件。

3. 在父组件中订阅输出属性：

<!-- app.component.html -->
<app-parent (notifyParent)="onNotify($event)"></app-parent>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  onNotify(message: string) {
    console.log(`Received message: ${message}`);
  }
}

在这个示例中，我们在父组件的模板中添加了 app-parent 组件，并通过 (notifyParent) 语法订阅了 notifyParent 输出属性。当子组件触发 notifyParent 事件时，父组件的 onNotify 方法会被调用，并接收来自子组件的事件数据。

请注意，EventEmitter 类是 Angular 框架的一部分，因此不需要单独安装任何依赖。如果您需要在非 Angular 环境中使用类似的功能，可能需要使用不同的库或 API。