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 相关文章推荐
js 处理数组重复元素示例代码
Dec 27 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
JavaScript Split()方法
Dec 18 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
JS制作简易计算器的实例代码
Jul 04 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
php实现微信支付之退款功能
2018/05/30 PHP
javascript各种复制代码收集
2008/09/20 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
numpy.where() 用法详解
2019/05/27 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
物业保安员岗位职责制度
2014/01/30 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书