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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue的toast弹窗组件实例详解
May 14 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
如何使用puppet替换文件中的string
2018/12/06 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue实现评论列表功能
2019/10/25 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python开发中module模块用法实例分析
2015/11/12 Python
python3中数组逆序输出方法
2020/12/01 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
毕业生应聘求职信
2014/07/10 职场文书
合同意向书范本
2014/07/30 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
高中班主任评语
2014/12/30 职场文书
承诺书模板大全
2015/05/04 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS