组件间通信 angualr4中间人模式

中间人模式相当于就是同时利用输入输出属性将信息通过两个组件共同的父组件进行组件间通讯，这个共同的父组件就是中间人

下面以一个例子来讲述

一个报价组件，有个购买组件，他们有一个共同的父组件APPcomponent。那么如何通过点击报价组件上的立即购买按钮够股票呢？

思路如下：

通过输出属性将报价组件上点击立即购买时的股票代码和股票价格等股票信息传递给父组件APPcomponent，父组件将接受的股票信息通过属性绑定传递给子组件购买组件进行股票购买。

步骤如下：

1.报价组件模板html：

第一步：先在报价组件设置一个购买按妞，当点击按钮的时候把当前的股票价格和代码发射出

<!--第一步：先在报价组件设置一个购买按妞，当点击按钮的时候把当前的股票价格和代码发射出去-->
<input type="button" value="立即购买" (click)="buyStock($event)">

2.报价组件component

// 第二步编写组件，向外发射购买信息

 // 第二步编写组件，向外发射购买信息
 @Output()
 buy:EventEmitter<PriceQuote>=new EventEmitter();
 constructor() {
   setInterval(() => {
     // 创建一个属性，这个属性的类型是定义好的PriceQuote类型。属性值等于new一个PriceQuote类型的值
 let priceQuote:PriceQuote=new PriceQuote(this.stockCode,100*Math.random());
 // 当前价格等于一秒钟生成一个价格的最后一个价格
 this.price=priceQuote.lastPrice;
 // 在这里用lastPrice类的emit向外发射一个值，也就是用EventEmitter类的emit方法向外发射一个值，这个方法接受一个值priceQuote，这个值得类型也是PriceQuote
 this.lastPrice.emit(priceQuote);
   },1000);
 }
buyStock(event){
   this.buy.emit(new PriceQuote(this.stockCode,this.price))
}

3.父组件，也就是中间人组件component

// 第四步：接收报价组件发射出来的购买信息

// 定义一个属性类型为PriceQuote（注意类型一点要注明是和子组件发射出来的数据一样的类型，也就是泛型一样）
// 来接收子组件发射除开的数据
priceQuote:PriceQuote=new PriceQuote("",0);
// 定义一个方法来接收子组件发射出的事件并获取里面的值，该方法接受一个事件，
// 事件名是子组件发射出来的
// 如果子组件没有指定输出属性的名字默认的接受的名字就是发射的事件的属性名，
// 如果输出属性设置看属性名，接受的事件名就是找个属性名

// 第四步：接收报价组件发射出来的购买信息
buyHandler(event:PriceQuote){
  // 将当前的属性值赋值为接受到的事件
  this.priceQuote=event;
}

4.中间人组件模板

<!--第五步：通过属性绑定将从报价组件获取到的值传给购买组件-->

<!--第五步：通过属性绑定将从报价组件获取到的值传给购买组件-->
<app-input [priceQuote]="priceQuote"></app-input>

5,。下 单组件compomnent

// 第六步：在下单组件接收一个输入属性获取父组件中间人传过来的购买信息
@Input()
priceQuote:PriceQuote;

6.下单组件模板

<!--第七步：显示购买信息-->
<p>买100收{{priceQuote.stockCode}}股票，价格是{{priceQuote.lastPrice}}</p>