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

 更新时间:2017年11月29日 11:21:15   作者:HaiJing1995  
这篇文章主要介绍了Angular4的输入属性与输出属性,结合实例形式详细分析了Angular4输入属性与输出属性的概念、功能及相关使用技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

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

相关文章

  • AugularJS从入门到实践(必看篇)

    AugularJS从入门到实践(必看篇)

    下面小编就为大家带来一篇AugularJS从入门到实践(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS变量及过滤器Filter用法分析

    AngularJS变量及过滤器Filter用法分析

    这篇文章主要介绍了AngularJS变量及过滤器Filter用法,结合实例形式分析了AngularJS变量、过滤器及自定义过滤器的相关用法与注意事项,需要的朋友可以参考下
    2016-11-11
  • angularJS 指令封装回到顶部示例详解

    angularJS 指令封装回到顶部示例详解

    本篇文章主要介绍了angularJS 指令封装回到顶部示例详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 详谈angularjs中路由页面强制更新的问题

    详谈angularjs中路由页面强制更新的问题

    下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS解决ng界面长表达式(ui-set)的方法分析

    AngularJS解决ng界面长表达式(ui-set)的方法分析

    这篇文章主要介绍了AngularJS解决ng界面长表达式(ui-set)的方法,通过具体问题的分析并结合实例形式给出了AngularJS长表达式的相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • angularjs手动识别字符串中的换行符方法

    angularjs手动识别字符串中的换行符方法

    今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 详解用webpack2搭建angular2的项目

    详解用webpack2搭建angular2的项目

    本篇文章主要介绍了详解用webpack2搭建angular2的项目 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 浅谈Angular2 ng-content 指令在组件中嵌入内容

    浅谈Angular2 ng-content 指令在组件中嵌入内容

    本篇文章主要介绍了浅谈Angular2 ng-content 指令在组件中嵌入内容,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • Angularjs中数据绑定的实例详解

    Angularjs中数据绑定的实例详解

    这篇文章主要介绍了Angularjs中数据绑定的实例详解的相关资料,这里提供简单实例,大家可以参考下,希望通过本文可以掌握这部分内容,需要的朋友可以参考下
    2017-08-08
  • Angularjs中的$apply及优化使用详解

    Angularjs中的$apply及优化使用详解

    angular js的双向数据绑定,在开发中起到的作用灰常大,所以下面这篇文章主要给大家介绍了关于Angularjs中$apply及优化使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧
    2018-07-07

最新评论