使用 Typescript 实现向父级发送点击事件

在开发 Web 应用程序时，我们通常会遇到需要在子组件中发送事件至其父组件的情况，这时可以通过角度（Angular）中的 Output 相关API来实现这一功能。

Output API

Angular中的 Output 用于从子组件发出事件以与父组件通信。 Output 的使用方式与 @Input 相似。

@Output() public event = new EventEmitter();

上述代码片段创建了一个用于向父组件发出事件的 EventEmitter。

要使用 EventEmitter 向父组件发出事件，可以使用它的 emit() 方法。 下面示例代码演示了如何使用 Output 向父组件发送事件。

<button (click)="clicked()">Child Button</button>

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

@Component({
  selector: 'child-component',
  template: `
   <h1>Child Component</h1>
   <button (click)="clicked()">Child Button</button>`,
})
export class ChildComponent {
  @Output() public event = new EventEmitter();
  public clicked(): void {
    this.event.emit();
  }
}

Output 可以用于将数据传递回父组件。 将数据附加到 emit() 以将其作为参数传递。

@Output() public eventWithParams = new EventEmitter<any>();

public clickedWithParams(): void {
  this.eventWithParams.emit({ id: 1, name: 'Angular' });
}

给父组件添加处理方法并接收事件的参数

父组件必须实现此子组件的处理程序，以便在发生事件时执行相应代码。

使用父组件的 HTML 模板来获取子组件事件的处理逻辑。例如：

<child-component (event)="parentMethod()" (eventWithParams)="parentMethodWithParams($event)"></child-component>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Parent Component</h1>
    <child-component (event)="parentMethod()" (eventWithParams)="parentMethodWithParams($event)"></child-component>
  `,
})
export class AppComponent {
  public parentMethod(): void {
    console.log('Parent method executed');
  }
  public parentMethodWithParams(event: any): void {
    console.log('Parent method executed, Event data:', event);
  }
}

在上述示例中， AppComponent 包括两种类型的事件处理程序方法： parentMethod 和 parentMethodWithParams。 parentMethod 和 parentMethodWithParams分别与没有参数和有参数的 Output 事件相关联。

小结

Angular 中的 Output API 允许子组件与父组件进行通信。 Output 的使用方式与 @Input 相似，当子组件通过 Output 发送事件时，父组件可以定义事件处理程序方法以接收并处理这些事件。 通过 Output 向父组件发送数据也是很容易的，只需要将数据附加到发出事件的 emit 方法的参数中即可。

参考文献

• Angular Output: https://angular.io/api/core/Output
• Angular EventEmitter: https://angular.io/api/core/EventEmitter