angular 使用rxjs 监听同级兄弟组件数据变化

angular 的官网给出了父子组件之间数据交互的方法,如ViewChild、EventEmitter

但是如果要在同级组件之间进行数据同步,似乎并没有给出太多的信息。

 

有时候我们想,在一个组件中修改数据之后,马上反映到另外一个组件中, 或者可能需要调用另外一个组件中的方法,这时候,我们就可以借助于 rxjs 了。

下面源码在 https://github.com/eleven26/angular-observer

 

1、首先,我们定义一个用于在应用内进行数据交互的 service

import {Injectable} from '@angular/core';@Injectable()
export class StoreService {public storageObj = {};set(key, value) {this.storageObj[key] = value;}get(key) {return this.storageObj[key];}remove(key) {delete this.storageObj[key]}
}

  

2、我们在需要监听数据变化的组件中加入以下代码,此处是直接写在了 AppComponent 中

import {Component, OnInit} from '@angular/core';
import {StoreService} from './store.service';
import {Observable} from 'rxjs/Observable';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{title = 'app works!';constructor(private storeService: StoreService) {}ngOnInit() {let myObserver: Observable<any> = Observable.create((observer) => {// payload 用以存放不同组件之间需要交互的数据let payload = this.storeService.get('payload');if (payload) {// do somethingif (payload['type'] == 'set-title') {this.title = payload['title'];}this.storeService.remove('payload');}observer.next();});// 保存到公共 service 中,以便不同组件之间可以使用同一个观察者对象this.storeService.set('myObserver', myObserver);}
}

  

上面的代码中,我们定义了一个可观察对象 myObserver,我们在此方法上调用 subscribe 的时候,Observable.create 的回调就会被调用,

然后,我们从 StoreSrevice 中取得需要处理的数据,具体数据格式自由规定,

我们处理完数据之后,把相关数据从 StoreSrevice 中移除

 

同时,我们需要把 myObserver 保存到 StoreService 中,以便不同组件获取到的是同一个 observer。

 

3、定义一个 A 组件,用来生产 payload,类似于 生产者-消费者

import {Component, OnInit} from '@angular/core';
import {StoreService} from './store.service';
import {Observable} from 'rxjs/Observable';@Component({selector: 'a-component',template: `<h1>A Component'title: {{title}}</h1><input type="text" (keyup)="change($event.target.value)">`,styles: []
})
export class AComponent implements OnInit{title = 'a title';public myObserver: Observable<any>;constructor(private storeService: StoreService) {}ngOnInit() {this.myObserver = this.storeService.get('myObserver');}change(new_title) {this.title = new_title;this.storeService.set('payload', {type: 'set-title',title: new_title});this.myObserver.subscribe(() => {});}
}

  

我们在该组件输入 title 的时候,发现 AppComponent 的 title 也发生了相应的变化。

这样一来,我们的效果就实现了。

 

 

转载于:https://www.cnblogs.com/eleven24/p/8409152.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255528.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV里IplImage的widthStep参数 和width参数

一直以为IplImage结构体中的widthStep元素大小等于width*nChannels&#xff0c;大错特错&#xff01;&#xff08;为了快速访问&#xff0c;要内存对齐啊&#xff09;查看OpenCV2.1的源码&#xff0c;在src/cxcore/cxarray.cpp文件中&#xff0c;找到cvInitImageHeader函数&…

【数字信号处理】——Python频谱绘制

# -*- coding: utf-8 -*- from matplotlib import pyplotpyplot.rcParams[font.sans-serif] [SimHei] pyplot.rcParams[axes.unicode_minus] Falseimport numpy as np import matplotlib.pyplot as pl import matplotlib import math import randomN 500 # 绘制点总数 fs 5…

Android开发:《Gradle Recipes for Android》阅读笔记1.3

想命令行执行gradle的构建&#xff0c;可以通过提供的gradle wrapper或者安装gradle。 构建android项目不需要安装gradle&#xff0c;因为android studio已经包含gradle。"gradle wrapper"指的是根目录下的gradlew和gradlew.bat脚本&#xff08;结尾的w是wrapper的意…

pic

转载于:https://www.cnblogs.com/edisonxiang/p/5392651.html

leetcode 643 Maximum Average Subarray I

题目详情 Given an array consisting of n integers, find the contiguous subarray of given length k that has the maximum average value. And you need to output the maximum average value. 输入一个数组nums和一个整数k。要求找出输入数组中长度为k的子数组&#xff0c…

OpenCV之cvSmooth函数平滑滤波

1、cvSmooth函数用法 定义原型 <span style"font-size:12px;"> void cvSmooth( const CvArr* src, CvArr* dst,int smoothtypeCV_GAUSSIAN,int param1, int param2, double param3, double param4 );</span>src:输入图像. dst:输出图像. smoot…

【python数字信号处理】——DFT、DTFT(频谱图、幅度图、相位图)

目录 一、离散时间傅里叶变换DTFT 二、离散傅里叶变换DFT 三、DFT与DTFT的关系 ​ 参考&#xff1a; 《数字信号处理》——&#xff08;一&#xff09;.DTFT、DFT(python实现)_远行者223的博客-CSDN博客python绘制频谱图DTFT&#xff0c;DFTpython绘制频谱图&#xff1a;…

ERROR:Tried to register widget id ==basemapGalleryDiv but that id is already registered解决办法

在ArcGIS Server开发中&#xff0c;遇到DIV已经被注册的情况&#xff0c;不能对原DIV内容进行更新。这里需要调用Dojo的destroyRecursive&#xff08;&#xff09;方法&#xff0c;逐个销毁该Widget下的子元素及其后代元素。然后就可以在原DIV上注册新的小部件。 示例代码&…

通过Spring Data Neo4J操作您的图形数据库

在前面的一篇文章《图形数据库Neo4J简介》中&#xff0c;我们已经对其内部所使用的各种机制进行了简单地介绍。而在我们尝试对Neo4J进行大版本升级时&#xff0c;我发现网络上并没有任何成型的样例代码以及简介&#xff0c;而其自身的文档也对如何使用Spring Data Neo4J介绍得语…

图像金字塔

图像金字塔被广泛用于各种视觉应用中。图像金字塔是一个图像集合&#xff0c;集合中所有的图像都源于同一个原始图像&#xff0c;而且是通过对原始图像连续降采样活得&#xff0c;直到达到某个中止条件才停止降采样。&#xff08;当然&#xff0c;降为一个像素肯定是中止条件。…

python使用git进行版本控制-分支管理

1、远程克隆 最好的方式是先创建远程库&#xff0c;然后&#xff0c;从远程库克隆&#xff1a; 首先在github上创建一个新的仓库&#xff0c;名字叫gitskills 我们勾选Initialize this repository with a README&#xff0c;这样GitHub会自动为我们创建一个README.md文件。 下一…

【python数字信号处理】——Z变换

目录 一、公式 二、代码 三、结果 一、公式 频域变量&#xff1a;z 时域变量&#xff1a;n 常见序列的Z变换&#xff1a;信号与系统复习归纳&#xff08;十一&#xff09;&#xff1a;Z变换例题_百把人的博客-CSDN博客_z变换例题基于东南大学陈从颜译《信号、系统和变换》和…

九宫格拼图 支持44 55等

代码下载转载于:https://www.cnblogs.com/ygcool/p/5395343.html

144. Binary Tree Preorder Traversal

Given a binary tree, return the preorder traversal of its nodes values. For example:Given binary tree {1,#,2,3}, 1\2/3return [1,2,3]. 该题是对树做前序遍历 下面分别是递归&#xff0c;非递归&#xff0c;分治三种思路的解题结果 #递归写法 class Solution(object):d…

一体化点焊机将要取代分体式焊钳在汽车制造生产线上的使用

目前大多数汽车制造厂及相关配套钣金件厂家选用的是悬挂式点焊机及分体式焊钳&#xff0c;从焊接变压器的功率参数看&#xff0c;约70 % 为160KVA 的&#xff0c;约30 % 为200 kVA 的。原因主要有两方面&#xff0c;一是新材料如镀锌钢板、高强度钢板、铝合金板的应用&#xff…

【python数字信号处理】——线性卷积

目录 一、公式概念 二、代码 1、numpy库 2、自定义打印出每一步结果 三、结果 一、公式概念 线性卷积_百度百科线性卷积(linear convolution) 在时域描述线性系统输入和输出之间关系的一种运算。这种运算在线性系统分析和信号处理中应用很多&#xff0c;通常简称卷积。中文…

activiti web流程设计器 整合视频 教程 SSM和独立部署的方式

本视频为activiti工作流的web流程设计器整合视频教程整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器&#xff09;本视频共讲了两种整合方式1. 流程设计器和其它工作流项目分开部署的方式2. 流程设计器和SSM框架项目整合在一起的方式视频大小 1.13 GB ~【…

移动端判断横屏竖屏

1. CSS判断横屏竖屏 写在同一个CSS中 media screen and (orientation: portrait) {   /*竖屏 css*/} media screen and (orientation: landscape) and (min-width:450px){   /*横屏 css*/}分开写在2个CSS 竖屏<link rel"stylesheet" media"all and (orie…

第五章 - 图像形态学 - 基于图像金字塔的图像分割(cvPyrSegmentation)

本例程涉及到几个数据结构及方法&#xff0c;CvMemStorage、cvPyrSegmentation()、CvConnectedComp、cvGetSeqElem(). CvMemStorage CvMemStorage Growing memory storage typedef struct CvMemStorage { struct CvMemBlock* bottom;/* first allocated block */ struct CvM…

泛型参数转换的问题

泛型不同参数类型生成的对象是相互独立的。 //如 Tuple<string> ts; Tuple<object> to; //ts to 是两个类型的对象。很多时候&#xff0c;我们希望实现 to ts 这种操作&#xff0c;为什么&#xff1f;因为看上去它应该如此。 为了达到这个目的&#xff0c;就要解决…