Angular4的输入属性与输出属性实例详解


Posted in Javascript onNovember 29, 2017

本文实例讲述了Angular4的输入属性与输出属性。分享给大家供大家参考,具体如下:

Angular4输入属性

输入属性通常用于父组件向子组件传递信息

举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order

首先在app.order.component.ts中声明需要由父组件传递进来的值

order.component.ts

...
@Input()
stockCode: string
@Input()
amount: string
...

order.component.html

<p>这里是子组件</p>
<p>股票代码为{{stockCode}}</p>
<p>股票总数为{{amount}}</p>

然后我们需要在父组件(app.component)中向子组件传值

app.component.ts

...
stock: string
...

app.component.html

<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

这里我们使用了Angular的双向数据绑定,将用户输入的值和控制器中的stock进行绑定。然后传递给子组件,子组件接收后在页面显示。

Angular4输出属性

当子组件需要向父组件传递信息时需要用到输出属性。

举个栗子:当我们从股票交易所获得股票的实时价格时,希望外部也可以得到这个信息。为了方便,这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote

使用EventEmitter从子组件向外发射事件

price.quote.ts

export class PriceQuoteComponent implements OnInit{
 stockCode: string = 'IBM';
 price: number;
 //使用EventEmitter发射事件
 //泛型是指往外发射的事件是什么类型
 //priceChange为事件名称
 @Output()
 priceChange:EventEmitter<PriceQuote> = new EventEmitter();
 constructor(){
  setInterval(() => {
   let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
   this.price = priceQuote.lastPrice;
   //发射事件
   this.priceChange.emit(priceQuote);
  })
 }
 ngInit(){
 }
}
//股票信息类
//stockCode为股票代码,lastPrice为股票价格
export class PriceQuote{
 constructor(public stockCode:string,
    public lastPrice:number
 )
}

price.quote.html

<p>
 这里是报价组件
</p>
<p>
 股票代码是{{stockCode}}
</p>
<p>
 股票价格是{{price | number:'2.2-2'}}
</p>

接着我们在父组件中接收事件

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<div>
 这是在报价组件外, 股票代码是{{priceQuote.stokcCode}},
 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

事件绑定和原生的事件绑定是一样的,都是将事件名称放在()中。

app.component.ts

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote('', 0);
 priceQuoteHandler(event:PriceQuote){
  this.priceQuote = event;
 }
}

这里的event类型就是子组件传递事件的类型。

简单的说,就是子组件通过emit发射事件priceChange,并将值传递出来,父组件在使用子组件时会触发priceChange事件,接收到值。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
node.js中axios使用心得总结
Nov 29 #Javascript
Vue2.0用户权限控制解决方案
Nov 29 #Javascript
vue.js项目中实用的小技巧汇总
Nov 29 #Javascript
关于 angularJS的一些用法
Nov 29 #Javascript
ReactNative之FlatList的具体使用方法
Nov 29 #Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 #Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
You might like
php.ini 配置文件的深入解析
2013/06/17 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
javascript新手语法小结
2008/06/15 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
10条PHP编程习惯
2014/05/26 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
中学门卫岗位职责
2013/12/26 职场文书
退休欢送会致辞
2015/07/31 职场文书
2016年母亲节广告语
2016/01/28 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server