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

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

在 ‘product-alerts.component.ts’ 中

export class ProductAlertsComponent {@Input() product;@Output() notify = new EventEmitter();
}

3、在‘product-alerts.component.html’ 中，用事件绑定更新 ‘Notify Me’ 按钮，以调用notify.emit() 方法。

在‘product-alerts.component.html’中

<p *ngIf="product.price > 700"><button (click)="notify.emit()">Notify Me</button>
</p>

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

在‘product-list.component.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、最后，修改商品列表组件来接收商品提醒组件的输出。在 product-list.component.html 中，把 app-product-alerts 组件（就是它显示的“Notify Me”按钮）的 notify 事件绑定到商品列表组件的 onNotify() 方法。

在 ‘product-list.component.html’ 中

<button (click)="share()">Share
</button><app-product-alerts[product]="product" (notify)="onNotify()">
</app-product-alerts>

点击‘Notify Me’ 后显示如下：

Angular官网学习4：Angular入门，你的第一个应用（4）输出相关推荐

Angular官网学习笔记
Angular官网学习笔记一.Angular概述 **什么是Angular:**一个基于TypeScript构建的开发平台包括: 一个基于组件的框架,用于构建可伸缩的Web应用一组完美集成的库,涵 ...
AngularJS/Angular官网
AngularJS官网:https://angularjs.org/ AngularJS中文官网:http://www.angularjs.net.cn/ Angular官网:https://angu ...
解决 Angular 官网下载的库 Schematics 执行 npm run build 时遇到的编译错误
我在 Angular 官网下载的 library Schematics 例子,运行命令行 npm run build 时,遇到如下错误: npm run build my-lib@0.0.1 buil ...
解决 Angular 官网下载的库 Schematics 在 windows 环境不支持 .. 的临时解决方案
我在 Angular 官网下载的 library Schematics 例子,运行命令行 npm run build 时,遇到如下错误: my-lib@0.0.1 build c:\Code\SPA\ ...
解决 Angular 官网下载的 library Schematics build 出错的办法
从 angular 官网下载 Schematics 的例子,在工作区的根目录下,运行库的 ng build 命令. ng build my-lib 错误消息: An unhandled excepti ...
为什么按照 Angular 官网教程执行简单的测试代码，会遇到expect is not defined的错误消息
Angular 官网的代码: https://angular.io/api/core/Injectable#providedin 我把这段代码原封不动地拷贝到我的 app.module.ts ,然后执 ...
Angular官网教程示例知识点总结
Angular官网教程示例知识点总结 1.背景 2.知识点 2.1 应用的外壳 2.1.1 使用 Angular CLI 创建初始的应用结构 2.1.2 启动应用服务器 2.1.3 双花括号表达式 2 ...
PCL官网学习OpenNI Grabber 调用奥比中光Astra s 遇到问题openni2_grabber.cpp @ 325 : No devices connected.
PCL官网学习OpenNI Grabber 调用奥比中光Astra s 遇到问题openni2_grabber.cpp @ 325 : No devices connected. 问题描述 termi ...
Spring AOP官网学习
Spring AOP官网学习 5.1 AOP概念让我们从定义一些核心的AOP概念和术语开始.这些术语并不是spring特有的.不幸的是,AOP术语不是特别直观. 1.Aspect(方面):跨多个类的 ...

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

Angular官网学习4：Angular入门，你的第一个应用（4）输出相关推荐

最新文章

热门文章