前言
组件之间可以通过建立父子关系来传递数据,但是这样两个组件之间的耦合性太强,重用性太低。那么如果组件间不存在关系,可以传递数据吗?如何传递呢?
中间人模式
中间人模式,顾名思义,就是两个组件之间通过一个中间人来传递数据,两个组件之间不需要知道彼此的存在,中间人接收一个组件的数据传递给另一个组件。
场景
交易员监看报价组件的价格,但股票的价格达到某一个值的时候,交易员会点一个交易按钮来购买股票,报价组件通知中间人交易员要购买股票,中间人知道哪个组件可以完成下单,并将股票价格传递该组件
实现
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>
效果显示
点击“立即购买”按钮,下单组件就可以接收到报价组件的实时信息。
小结
这样中间人模式就实现了,两个组件之间不需要指导彼此的存在就可以传递数据,增强组件的重用性。