Angular4学习笔记(六)

组价间通信(以一个购买股票的小例子来体现组建通信所学的内容)

(一)输入属性

 效果图:

代码实现如下:

  这里把股票代码scoket和股票数量绑定到scoketCode和amount属性传递给子组件order
  先创建一个子组件order,用来显示子组件的信息

app.component.html

<div>
我是父组件!
</div>
<inputtype="text" [(ngModel)]="scoket"placeholder="请输入股票代码">
<!-- 把文本框输入的scoket绑定到scoketCode这个属性上 -->
<app-order [scoketCode]="scoket" [amount]="100"></app-order>

app.component.ts

scoket="";

order.component.html

<p>
我是子组件!
</p>
买{{amount}}手{{scoketCode}}股票!

order.component.ts

// @Input()指从父组件获取值(子组件的值不能给父组件)
@Input()
amount:number;
@Input()
scoketCode:string;

  (二)输出组件

效果图:

 这里使用EventEmitter对象监听事件并发送给父类(外部)

代码实现如下:

price-quote.component.html

<div>
我是priceQuote组件,用来显示股票最新价格!
</div>
<div>
<!-- 使用管道保留两位整数,两位小数 -->
股票{{scoketCode}},最新报价是{{price | number:'2.2-2'}}!
</div>

price-quote.component.ts

export classPriceQuoteComponent implements OnInit {
scoketCode="IBM";
price:number;
//EventEmitter:是一个对事件进行监听的对象,既可以发送时间,也可以定略事件
@Output()
lastPrice :EventEmitter<PriceQuote> =new EventEmitter();
constructor() {
//setInterval实现股票价格变化,1000代表一秒执行一次
//股票价格用100*Math.random()代替
setInterval(()=>{
let priceQuote :PriceQuote =newPriceQuote(this.scoketCode,100*Math.random());
this.price=priceQuote.lastPrice;
//这里调用emit发送最新价格事件
this.lastPrice.emit(priceQuote);
},1000)
}

ngOnInit() {
}

}
/**
* PriceQuote类
*/
export classPriceQuote{
constructor(publicscoketCode:string,publiclastPrice:number){

}
}

app.component.html

<!-- lastPrice指当前需要捕捉的事件,$event指当前事件 -->
<app-price-quote (lastPrice)="getLastPrice($event)"></app-price-quote>
<hr>
我是父组件!<br>

股票{{priceQuote.scoketCode}},最新报价是{{priceQuote.lastPrice | number:'2.2-2'}}!

app.component.ts

export classAppComponent {
scoket="";

//这里接收发送过来的最新报价
priceQuote :PriceQuote =new PriceQuote("",0);
//获取最新报价 
//event:代表当前事件,指从子组件发送过来的lastPrice
getLastPrice(event:PriceQuote){
this.priceQuote =event;
}
}

(三)中间人模式通信:


效果图:priceQutoe组件上点击购买股票,把最新价格发送给app组件,app组件又发送给order组件


代码如下:

price-qutoe.component.html

<input type="button" value="购买股票" (click)="buySocket()" >

price-qutoe.component.ts

 @Output()
  buy :EventEmitter<PriceQuote> = new EventEmitter();

//当点击购买股票时发送最新报价到中间组件
   buySocket(){
     this.buy.emit(new PriceQuote(this.scoketCode,this.price));
   }



app.component.html

<app-price-quote (buy)="buyHandler($event)"></app-price-quote>
<hr>
<!-- 把 priceQuote 绑定到priceQuote 上在order组件获取-->
<app-order [priceQuote]="priceQuote"></app-order>
app.component.ts

 buyHandler(event:PriceQuote){
    this.priceQuote = event;
  }


order.component.ts

 @Input()
  priceQuote:PriceQuote;

order.component.html

<p>
  我是子组件!
</p>
买100手{{priceQuote.scoketCode}}股票,价格是:{{priceQuote.lastPrice}}
*****************************************************

这是组建间通信实现的小例子,请大家多多指教!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值