Angular4学习笔记(六)

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

(一)输入属性

 效果图：

代码实现如下：

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

app.component.html

我是父组件！

app.component.ts

scoket="";

order.component.html

我是子组件！

买{{amount}}手{{scoketCode}}股票！

order.component.ts

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

  （二）输出组件

效果图：

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

代码实现如下：

price-quote.component.html

我是priceQuote组件，用来显示股票最新价格！



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

price-quote.component.ts

export classPriceQuoteComponent implements OnInit {
scoketCode="IBM";
price:number;
//EventEmitter:是一个对事件进行监听的对象，既可以发送时间，也可以定略事件
@Output()
lastPrice :EventEmitter =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

我是父组件！


股票{{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

price-qutoe.component.ts

 @Output()
  buy :EventEmitter = new EventEmitter();

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

app.component.html

app.component.ts

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

order.component.ts

 @Input()
  priceQuote:PriceQuote;

order.component.html

  我是子组件！

买100手{{priceQuote.scoketCode}}股票，价格是：{{priceQuote.lastPrice}}

*****************************************************

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