纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Angular组件之中间人模式 详解Angular组件之中间人模式

starof   2021-05-24 我要评论
想了解详解Angular组件之中间人模式的相关内容吗,starof在本文为您仔细讲解Angular组件之中间人模式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>
@Output()
  buy:EventEmitter<PriceQuote>=new EventEmitter();

  buyStock(event){
    this.buy.emit(new PriceQuote(this.stockCode,this.price));
  }

2、父组件接收处理事件

父组件中去监听buy事件,获得当前的购买信息后

<app-price-quote (buy)="buyHandler($event)" ></app-price-quote>
  buyHandler(event:PriceQuote){
    this.priceQuote=event;
  }

把报价信息通过属性绑定传给下单组件即可。

<app-order [priceQuote]="priceQuote"></app-order>

3、下单组件

下单组件有一个输入属性接收报价并展示到页面。

  @Input()
  priceQuote:PriceQuote;
<div>
  我是下单组件
</div>
<div>
  买100手{{priceQuote.stockCode}}股票,买入价格是{{priceQuote.lastPrice | number:"2.2-2"}}
</div>

4、运行结果

报价组件价格一直在变,点立即购买就会按照当前价格买入当前股票,什么时候点按钮什么时候就会更新。

好处:在报价组件里没有任何和下单组件相关的代码,报价组件甚至不知道下单组件的存在。报价组件只是发射购买时候的股票代码和股票价格。同样在下单组件中也没有任何和报价组件相关的东西。报价组件和下单组件在彼此不知道的情况下共同完成里股票下单的功能。组件高重用。

三、使用服务作为中间人

如果两个组件没有共同的父组件,甚至不在一块显示,要通讯怎么办?比如文章开头图中的组件4和组件6。

这时,应该使用一个可注入的服务作为中间人。无论何时当组件被创建,中间人服务会被注入。组件可以订阅服务发射的事件流。

在使用Angular开发一个应用前,应该深入思考并设计好编写哪些可重用的组件,比如订单组件,报价组件,哪些组件和服务做哪些组件的中间人。组件的输入是什么,输出是什么,组件之间如何通讯。然后开始写代码。


相关文章

猜您喜欢

  • Python逆向抓取APP数据 怎样使用Python逆向抓取APP数据

    想了解怎样使用Python逆向抓取APP数据的相关内容吗,不加班的程序员丶在本文为您仔细讲解Python逆向抓取APP数据的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Python逆向抓取APP数据,Python逆向抓取,Python,抓取APP数据,下面大家一起来学习吧。..
  • 详解Dataset和DataLoader Pytorch数据读取之Dataset和DataLoader知识总结

    想了解Pytorch数据读取之Dataset和DataLoader知识总结的相关内容吗,群星闪耀在本文为您仔细讲解详解Dataset和DataLoader的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Pytorch,Dataset,Pytorch,DataLoader,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.moon-script.com 【月光下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式