angular 子组件的事件

Angular 子组件可以通过输出属性 (Output Property) 向父组件发送事件。以下是一个简单的例子：

子组件：

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

@Component({
  selector: 'child-component',
  template: `
    <button (click)="onClick()">点击</button>
  `
})
export class ChildComponent {
  @Output() buttonClicked = new EventEmitter();

  onClick() {
    this.buttonClicked.emit();
  }
}

父组件：

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

@Component({
  selector: 'parent-component',
  template: `
    <child-component (buttonClicked)="onButtonClicked()"></child-component>
  `
})
export class ParentComponent {
  onButtonClicked() {
    console.log('按钮被点击了');
  }
}

在子组件中，我们定义了一个 `buttonClicked` 输出属性，并在 `onClick` 方法中触发了该属性的 `emit` 方法，以便通知父组件该事件已经发生。

在父组件中，我们使用子组件的标签，并在其中添加一个 `buttonClicked` 的事件处理程序，以便在子组件中发生点击事件时执行该方法。

此外，我们还可以在 `buttonClicked` 属性上添加参数，以便在事件发生时向父组件传递数据。