揭秘：JavaScript 开发中 Angular2 事件发射器原理与实战示例

事件发射器（EventEmitter）是Angular2中的一个核心概念，它允许组件之间进行通信。事件发射器是一个服务，可以在组件中创建并使用，用于将数据从一个组件发送到另一个组件。 事件发射器的工作方式是通过将数据作为参数传递给事件发射器的 emit() 方法。这将触发一个事件，该事件可以被任何订阅该事件的组件捕获和处理。 在Angular2中，事件发射器通常用于父组件向子组件发送数据，或者在多个组件之间共享数据。例如，一个表单组件可以使用事件发射器将用户输入的数据发送给父组件，或者一个导航组件可以使用事件发射器在不同的路由之间传递数据。 以下是一个简单的例子，展示了如何在Angular2中使用事件发射器： ```typescript import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-parent', template: ` <app-child (data)="handleData($event)"></app-child> ` }) export class ParentComponent { @Output() data = new EventEmitter<string>(); handleData(data: string) { console.log('Received data:', data); } } @Component({ selector: 'app-child', template: ` <input type="text" [(ngModel)]="data" (keyup)="emitData()"> ` }) export class ChildComponent { @Input() data: string; @Output() data = new EventEmitter<string>(); emitData() { this.data.emit(this.data); } } ``` 在这个例子中，父组件定义了一个名为 data 的输出属性，用于向子组件发送数据。子组件定义了一个名为 data 的输入属性和一个名为 data 的输出属性，用于接收父组件发送的数据，并将其发射到父组件。 当用户在子组件的输入框中输入数据并按下回车键时，子组件的 emitData() 方法会被调用，该方法将子组件的 data 属性的值发送到父组件。父组件的 handleData() 方法会接收到这个数据，并在控制台打印出来。 ######[AI写代码神器 | 440点数解答 | 2023-11-09 01:18:20]