【angular】-中间人模式

前言

组件之间可以通过建立父子关系来传递数据，但是这样两个组件之间的耦合性太强，重用性太低。那么如果组件间不存在关系，可以传递数据吗？如何传递呢？

中间人模式

中间人模式，顾名思义，就是两个组件之间通过一个中间人来传递数据，两个组件之间不需要知道彼此的存在，中间人接收一个组件的数据传递给另一个组件。

场景

交易员监看报价组件的价格，但股票的价格达到某一个值的时候，交易员会点一个交易按钮来购买股票，报价组件通知中间人交易员要购买股票，中间人知道哪个组件可以完成下单，并将股票价格传递该组件

实现

1、报价组件
(1) 添加购买按钮

<div>
  我是报价组件
</div>
<div>
  股票代码是{{stockCode}},股票价格是{{price | number:'2.2-2'}}
</div>

<div>
  <input type="button" value="立即购买" (click)="buyStock($event)">
</div>

(2) 然后报价组件将当前股票价格发射出去

//用来发射报价
  @Output()
  buy:EventEmitter<PriceQuote> = new EventEmitter();


  constructor() { 
    setInterval(() => {
      // 声明一个priceQuote变量
      let priceQuote:PriceQuote = new PriceQuote(this.stockCode, 100*Math.random());
      this.price = priceQuote.lastPrice;
      // 用emit方法发射事件的时候，就是这个泛型<PriceQuote>所制定的变量priceQuote的数据
      this.lastPrice.emit(priceQuote);
    },1000)
  }

  //这就是报价组件做的事，只要把价格发射出去就行，不管谁去接收（应该是中间人去接收，也就是app组件）
  //点击按钮时，用buy.emit把当前股票价格发射出去
  buyStock(event){
    this.buy.emit(new PriceQuote(this.stockCode,this.price));

  }

2、中间人接收(app组件)，并传给下单组件

<!-- 监听buy事件,并接收数据，然后通过属性绑定传给下单组件 -->
<app-price-quote (buy)="buyHandler($event)"></app-price-quote>
<app-order [priceQuote]='priceQuote'></app-order>

export class AppComponent {

  stock = "";
  //给本地的priceQuote设置默认值
  priceQuote:PriceQuote = new PriceQuote("",0);

  // 在priceQuoteHandler方法中接收event，event类型就是PriceQuote类型的（子组件中发射出的类型）
  buyHandler(event:PriceQuote){
    // 然后让本地的priceQuote等于捕获的event
    this.priceQuote = event;
  }
}

3、下单组件，接收中间人传来的数据，并显示
(1) 接收

@Input()
  priceQuote:PriceQuote;

(2) 显示

<div>
  我是下单组件
</div>
<div>
  <!-- 绑定属性 -->
  卖100手{{priceQuote.stockCode}}股票，买入价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

效果显示

点击“立即购买”按钮，下单组件就可以接收到报价组件的实时信息。

小结

这样中间人模式就实现了，两个组件之间不需要指导彼此的存在就可以传递数据，增强组件的重用性。