位置: 编程技术 - 正文
Angular4的输入属性与输出属性实例详解(angularjs input)
编辑：rootadmin推荐整理分享Angular4的输入属性与输出属性实例详解(angularjs input)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:angular设置input的值,angular nz,angular implements,angular 4,angular4教程,angular 4,angular 4,angular input,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了Angular4的输入属性与输出属性。分享给大家供大家参考，具体如下：
Angular4输入属性
输入属性通常用于父组件向子组件传递信息
举个栗子：我们在父组件向子组件传递股票代码，这里的子组件我们叫它app-order
首先在app.order.component.ts中声明需要由父组件传递进来的值
order.component.ts
order.component.html
然后我们需要在父组件(app.component)中向子组件传值
app.component.ts
app.component.html
这里我们使用了Angular的双向数据绑定，将用户输入的值和控制器中的stock进行绑定。然后传递给子组件，子组件接收后在页面显示。
Angular4输出属性
当子组件需要向父组件传递信息时需要用到输出属性。
举个栗子：当我们从股票交易所获得股票的实时价格时，希望外部也可以得到这个信息。为了方便，这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote
使用EventEmitter从子组件向外发射事件
price.quote.ts
price.quote.html
接着我们在父组件中接收事件
app.component.html
事件绑定和原生的事件绑定是一样的，都是将事件名称放在（）中。
app.component.ts
这里的event类型就是子组件传递事件的类型。
简单的说，就是子组件通过emit发射事件priceChange，并将值传递出来，父组件在使用子组件时会触发priceChange事件，接收到值。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
Angular2管道Pipe及自定义管道格式数据用法实例分析 本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下：管道(Pipe)可以根据开发者的意愿将数据格式化，还可以
详解angularjs实现echart图表效果最简洁教程 本文介绍了详解angularjs实现echart图表效果最简洁教程，分享给大家，具体如下：ehcart是百度做的数据图表，基于原生js。接口和配置都写的很好很易读，
3种vue组件的书写形式 本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下第一种使用script标签!DOCTYPEhtmlhtmlbodydivid="app"my-component/my-component/div--注意：使用scr
标签: angularjs input
本文链接地址:https://www.jiuchutong.com/biancheng/378936.html 转载请保留说明！
