4 Angular官网学习4：Angular入门，你的第一个应用输出 _angular

在本节中，将设置商品提醒组件，当用户点击‘ Me’的时候，像商品列表组件发出事件。
1、打开 .ts，从 @/core 中导入和。
2、在组件类中，用 @ 装饰器和一个事件发射器（）实例定义一个名为的属性。这可以让商品提醒组件在属性发生变化时发出事件。
在 ‘.ts’ 中
export class ProductAlertsComponent {@Input() product;@Output() notify = new EventEmitter();}

文章插图
3、在‘.html’ 中，用事件绑定更新 ‘ Me’ 按钮，以调用.emit() 方法。
在‘.html’中

 700">

5、点击改按钮时，应该由父组件（商品列表组件）采取行动，所以，在.ts 文件中，定义一个 () 方法。如下：
在‘.ts’ 中

文章插图

export class ProductListComponent {products = products;share() {window.alert('The product has been shared!');}onNotify() {window.alert('You will be notified when the product goes on sale');}}

6、最后，修改商品列表组件来接收商品提醒组件的输出。在 .html 中，把 app-- 组件（就是它显示的“ Me”按钮）的事件绑定到商品列表组件的 () 方法。
在 ‘.html’ 中
【4Angular官网学习4：Angular入门，你的第一个应用输出】
点击‘ Me’ 后显示如下：