在上一篇文章中，我们使用 @Input 实现了动态注入属性的值。这种情况适用于从父级组件向子级组件传递数据，或者说从上向下传递数据（还记得组件的树形结构吗？）。那么，如何从子级组件向父级组件传递数据呢？
考虑这样一个场景：如果用户喜欢一本书，他通过点击一个按钮，来传达这一信息。解决办法是：在 book 组件模板中，添加一个按钮，当用户点击按钮时，book 组件会通知 AppComponent 组件，用户是喜欢还是不喜欢这本书。
定义输出
使用 VS Code 打开 my-app 项目。我们先修改 book 组件，定义输出属性。
- 打开
src/app/book/book.component.ts，在文件顶部，导入我们需要使用的依赖。
import { Output, EventEmitter } from "@angular/core”;
- 在组件类的定义中，增加输出属性
liked。
@Output() liked = new EventEmitter<boolean>();
@Output：表示 liked 属性可以从子级组件传递到父级组件。
boolean：表示触发 liked 事件时，传递的数据类型。
- 完整代码如下所示。
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 组件模板。
- 打开
src/app/book/book.component.html，在文件末尾添加下面一行代码。
<button (click)="liked.emit(true)">喜欢</button>
绑定事件
喜欢按钮的点击事件的处理方法，需要放置在 book 组件模板的父级组件 AppComponent 中。
- 打开
src/app/app.component.ts文件。在组件类的定义中，添加下面的函数代码，用户在点击按钮时，执行函数中的逻辑。需要注意的是，event 参数是从子级组件传递到父级组件的。
onLike(event) {
if (event) {
window.alert(`我喜欢 ${this.bookName}。`);
} else {
window.alert(`我不再喜欢 ${this.bookName}。`);
}
}
- 打开
src/app/app.component.html. 把在主组件中定义的事件处理函数，关联到按钮的点击事件。
<app-book [name]="bookName" (liked)="onLike($event)"></app-book>
测试效果
使用 ng serve 命令，运行 my-app 项目。
- 打开浏览器，访问
http://localhost:4200.
首页显示喜欢按钮
-
点击喜欢按钮。
点击喜欢按钮效果
