这次给大家带来Angular4输入与输出怎么使用，使用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
export class PriceQuoteComponent implements OnInit{ stockCode: string = 'IBM'; price: number; //使用EventEmitter发射事件 //泛型是指往外发射的事件是什么类型 //priceChange为事件名称 @Output() priceChange:EventEmitter = 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
这里是报价组件
股票代码是{{stockCode}}
股票价格是{{price | number:'2.2-2'}}
登录后复制
接着我们在父组件中接收事件
app.component.html
这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}， 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
登录后复制
事件绑定和原生的事件绑定是一样的，都是将事件名称放在（）中。
app.component.ts
export class AppComponent{ priceQuote:PriceQuote = new PriceQuote('', 0); priceQuoteHandler(event:PriceQuote){ this.priceQuote = event; }}
登录后复制
这里的event类型就是子组件传递事件的类型。
简单的说，就是子组件通过emit发射事件priceChange，并将值传递出来，父组件在使用子组件时会触发priceChange事件，接收到值。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
在微信小程序里添加弹出对话框
新手必看的js实现异步方法
以上就是Angular4输入与输出怎么使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772356.html
