处理 Anuglar 事件

在上一篇文章中，我们使用 @Input 实现了动态注入属性的值。这种情况适用于从父级组件向子级组件传递数据，或者说从上向下传递数据（还记得组件的树形结构吗？）。那么，如何从子级组件向父级组件传递数据呢？

考虑这样一个场景：如果用户喜欢一本书，他通过点击一个按钮，来传达这一信息。解决办法是：在 book 组件模板中，添加一个按钮，当用户点击按钮时，book 组件会通知 AppComponent 组件，用户是喜欢还是不喜欢这本书。

定义输出

使用 VS Code 打开 my-app 项目。我们先修改 book 组件，定义输出属性。

1. 打开 src/app/book/book.component.ts ，在文件顶部，导入我们需要使用的依赖。

import { Output, EventEmitter } from "@angular/core”;

2. 在组件类的定义中，增加输出属性 liked。

@Output() liked = new EventEmitter<boolean>();

@Output：表示 liked 属性可以从子级组件传递到父级组件。
boolean：表示触发 liked 事件时，传递的数据类型。

3. 完整代码如下所示。

import { Component, OnInit } from '@angular/core’;
import { Output, EventEmitter } from "@angular/core”;
import { Input } from "@angular/core”;

@Component({
  selector: 'app-book’,
  templateUrl: './book.component.html’,
  styleUrls: ['./book.component.css’]
})
export class BookComponent implements OnInit {

  @Input() name: string;
  @Output() liked = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
  }

}

注册事件

接下来，我们修改 book 组件模板。

1. 打开 src/app/book/book.component.html，在文件末尾添加下面一行代码。

<button (click)="liked.emit(true)">喜欢</button>

绑定事件

喜欢按钮的点击事件的处理方法，需要放置在 book 组件模板的父级组件 AppComponent 中。

1. 打开 src/app/app.component.ts 文件。在组件类的定义中，添加下面的函数代码，用户在点击按钮时，执行函数中的逻辑。需要注意的是，event 参数是从子级组件传递到父级组件的。

  onLike(event) {
    if (event) {
      window.alert(`我喜欢 ${this.bookName}。`);
    } else {
      window.alert(`我不再喜欢 ${this.bookName}。`);
    }
  }

2. 打开 src/app/app.component.html. 把在主组件中定义的事件处理函数，关联到按钮的点击事件。

<app-book [name]="bookName" (liked)="onLike($event)"></app-book>

测试效果

使用 ng serve 命令，运行 my-app 项目。

1. 打开浏览器，访问 http://localhost:4200.

首页显示喜欢按钮

2. 点击喜欢按钮。

   
   点击喜欢按钮效果

参考资料

• https://angular.io/api/core/EventEmitter
• https://angular.io/guide/inputs-outputs