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设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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实现字符串大小写转函数的功能实例
2019/02/06 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
详解vue 组件
2020/06/11 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python实现多线程网页下载器
2018/04/15 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
opencv实现简单人脸识别
2021/02/19 Python
thinkphp5 路由分发原理
2021/03/18 PHP
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
公司中秋节活动方案
2014/02/12 职场文书
初三开学计划书
2014/04/27 职场文书
水电站项目建议书
2014/05/12 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python