详解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开发一个应用前，应该深入思考并设计好编写哪些可重用的组件，比如订单组件，报价组件，哪些组件和服务做哪些组件的中间人。组件的输入是什么，输出是什么，组件之间如何通讯。然后开始写代码。

以上就是详解Angular组件之中间人模式的详细内容，更多关于Angular组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解Angular父子组件通讯

    详解Angular父子组件通讯

    概述 Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来

  • angular组件间传值测试的方法详解

    angular组件间传值测试的方法详解

    前言 我们知道angular组件间通讯有多种方法,其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯.具体如何通讯请参考angular组件间通讯,本文不再赘述,我们来讲讲关于此方法如何进行单元测试. 创建假组件 我们单元测试父组件与子组件的的交互是否符合我们的要求,我们在父组件进行测试,就需要模拟一个假的子组件出来,这样排除其他因素对测试的影响. 比如现在我在分页组件里写了一个每页大小选择组件,现在要测试一下组件间交互.现在分页组件就是我们的父组件,每页大小组件就是我们的

  • Angular性能优化之第三方组件和懒加载技术

    Angular性能优化之第三方组件和懒加载技术

    概述 应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和使用Angular,本文将以在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能. 环境准备 1.全局安装Angular CLI:npm install -g @angular/cli 2.使用Angular CLI创建一个新

  • 详解Angular动态组件

    使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看

  • angular组件间通讯的实现方法示例

    前言 一个Angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统. 1.情景引入 下面例举一个实际遇到的情况: 上图页面包含两个组件,"新增班级组件"和"选择教师组件",在新增班级时需要选择改班级的管理教师,管理教师列表要从数据库中获取.选择好教师后,"选择教师组件"要把选择的教师对象传递回"新增班级组件",这其中涉及到对象传递称为通讯. 2.组件关系 组件之间有几

  • Angular事件之不同组件间传递数据的方法

    利用Angular Event在不同组件之间传递数据 为了实现在Angular不同Component之间相互传递数据,可以使用Event分发的思路来实现. 使用事件实现在不同组件之前传递数据的思路如下: 定义一个服务,用来实现事件的发布和订阅方法. 组件A注入事件服务的依赖,将自己要传递数据的数据以事件的形式发布出去. 组件B注入事件服务的依赖,并订阅相关事件. 定义一个服务 在终端输入 ng g service event Angular会自动在项目的app目录下生成 event.servic

  • Angular7创建项目、组件、服务以及服务的使用

    三大前端项目就剩angular没学了,在网上找了几个教程,这里总结一下,方便以后用到时查阅 创建项目 首先安装cli工具 npm install -g @angular/cli 创建一个空项目, 有两处要选择的,一个是路由,我这里是要路由的,还有一个开发css的语言,我这里选择scss,就不截图了,选完后会自动通过yarn安装依赖,稍等一会就好了 ng new pybbs-front-angular 创建好了,运行 npm run start 或者 ng serve 启动服务,然后就可以在浏览器

  • 详解Angular6学习笔记之主从组件

    主从组件 继学习笔记6,现在可以在页面上显示一个数组,但是原则上不能将所有特性放在同一个组件中,因为如果将所有特性放在同一个组件中,当特性特别多时,组件就变得不好维护了.所以要将大型组件拆分为多个小型组件,使每一个小型组件集中处理某一个特性任务或者工作流,而且这样也便于维护. 这次要将学习笔记6中的查看hero详情,放置在一个新的,独立,可复用的组件中,集中在新的组件管理和维护hero详情的信息. 1.创建一个新的组件 使用 Angular CLI 生成一个名叫 hero-detail 的新组件

  • angularjs1.5 组件内用函数向外传值的实例

    组件: .component('homeCityListCom',{ bindings: { list: '<', cityname:'&' }, controllerAs: 'vm', template: ` <div class="cityListBox"> <span class="title">按拼音首字母选择</span> <div class="cityItem flexRowStart&

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

    详解Angular组件之中间人模式

    一.中间人模式 该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色.顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯.依次类推,组件2是组件4和组件5的中间人.组件3是组件7和组件8的中间人. 中间人负责从一个组件接收数据并将其传递给另一个组件. 二.例子 股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按钮,来购买股票.问题:报价组件并不知道应该如何下单来买股票,它只是用来监控股票价格的.所以报价组件在这时应

  • 详解Angular组件之投影

    详解Angular组件之投影

    概述 运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>

  • 详解Angular组件之生命周期(二)

    详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • 详解Angular组件生命周期(一)

    详解Angular组件生命周期(一)

    概述 组件声明周期以及angular的变化发现机制 红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life

  • 详解Angular组件数据不能实时更新到视图上的问题

    目录 问题起源 OnPush策略 当前组件或子组件之一触发了事件 总结 问题起源 MainComponent: @Component({ selector: 'main', template: ` <MenuComponent [isReport]="isReport"> </MenuComponent> `, changeDetection:ChangeDetectionStrategy.OnPush }) export class MainComponent

  • 详解React的回调渲染模式

    一.一个简单的小例子 1.父组件 <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />} </Twitter> 2.子组件框架 import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' // fetc

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • 详解Vue组件复用和扩展之道

    概述 软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择. 本文介绍几种比较常见的方法和模式,希望对你有所帮助. 扩展组件是否必要 要知道,所有的组件扩展方法都会增加复杂性和额外代码,有时候还会增加性能消耗. 因此,在决定扩展组件之前,最好先看看有

随机推荐