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

2023-09-20 07:32:05 189

本文实例讲述了Angular4的输入属性与输出属性。分享给大家供大家参考，具体如下：

Angular4输入属性

输入属性通常用于父组件向子组件传递信息

举个栗子：我们在父组件向子组件传递股票代码，这里的子组件我们叫它app-order

首先在app.order.component.ts中声明需要由父组件传递进来的值

order.component.ts

...
@Input()
stockCode:string
@Input()
amount:string
...

order.component.html

这里是子组件
股票代码为{{stockCode}}
股票总数为{{amount}}

然后我们需要在父组件(app.component)中向子组件传值

app.component.ts

...
stock:string
...

app.component.html

这里我们使用了Angular的双向数据绑定，将用户输入的值和控制器中的stock进行绑定。然后传递给子组件，子组件接收后在页面显示。

Angular4输出属性

当子组件需要向父组件传递信息时需要用到输出属性。

举个栗子：当我们从股票交易所获得股票的实时价格时，希望外部也可以得到这个信息。为了方便，这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote

使用EventEmitter从子组件向外发射事件

price.quote.ts

exportclassPriceQuoteComponentimplementsOnInit{
stockCode:string='IBM';
price:number;
//使用EventEmitter发射事件
//泛型是指往外发射的事件是什么类型
//priceChange为事件名称
@Output()
priceChange:EventEmitter=newEventEmitter();
constructor(){
setInterval(()=>{
letpriceQuote=newPriceQuote(this.stockCode,100*Math.random());
this.price=priceQuote.lastPrice;
//发射事件
this.priceChange.emit(priceQuote);
})
}
ngInit(){
}
}
//股票信息类
//stockCode为股票代码，lastPrice为股票价格
exportclassPriceQuote{
constructor(publicstockCode:string,
publiclastPrice:number
)
}

price.quote.html


这里是报价组件


股票代码是{{stockCode}}


股票价格是{{price|number:'2.2-2'}}

接着我们在父组件中接收事件

app.component.html



这是在报价组件外，股票代码是{{priceQuote.stokcCode}}，
股票价格是{{priceQuote.lastPrice|number:'2.2-2'}}

事件绑定和原生的事件绑定是一样的，都是将事件名称放在（）中。

app.component.ts

exportclassAppComponent{
priceQuote:PriceQuote=newPriceQuote('',0);
priceQuoteHandler(event:PriceQuote){
this.priceQuote=event;
}
}

这里的event类型就是子组件传递事件的类型。

简单的说，就是子组件通过emit发射事件priceChange，并将值传递出来，父组件在使用子组件时会触发priceChange事件，接收到值。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐