Angular组件——中间人模式

设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式。

一、中间人模式

Angular组件——中间人模式

该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色。顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯。依次类推,组件2是组件4和组件5的中间人。组件3是组件7和组件8的中间人。

中间人负责从一个组件接收数据并将其传递给另一个组件。

二、例子

股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按钮,来购买股票。问题:报价组件并不知道应该如何下单来买股票,它只是用来监控股票价格的。所以报价组件在这时应该通知它的中间人【也就是APP组件】告诉它交易员要在某个价格购买某只股票。中间人应该知道哪个组件可以完成下单,并将股票代码和当前的价格传给这个组件。

1、报价组件上加购买按钮

在报价组件上加一个按钮,在股票到某个价格的时候交易员可以点击按钮在这个价格买这个股票。

<div> 我是报价组件 </div> <div> 股票代码是{{stockCode}},股票价格是{{price | number:"2.0-2"}} </div> <div> <input type="button" value="立即购买" (click)="$($event)"> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwxgw.html