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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
微信小程序 教程之模板
Oct 18 Javascript
解析js如何获取css样式
Dec 11 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
深入理解Vue 的钩子函数
Sep 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
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
CI框架中zip类应用示例
2014/06/17 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
运动会致辞稿50字
2014/02/04 职场文书
国培教师自我鉴定
2014/02/12 职场文书
会计专业求职信范文
2014/03/16 职场文书
投标承诺书范本
2014/03/27 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2016年国培研修日志
2015/11/13 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server