关于rxjs subject订阅分发实现Angular的全局数据管理与同步更新
时间:2019-10-22
本文章向大家介绍关于rxjs subject订阅分发实现Angular的全局数据管理与同步更新,主要包括关于rxjs subject订阅分发实现Angular的全局数据管理与同步更新使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
自定义实现angular中数据的状态管理,如有不妥请指正
一、先介绍一下rxjs中subject;
Import {subject}from’rxjs’ Subject 数据的订阅与分发,结合报刊的发布与订阅进行功能的模拟,subject即是observeable对象也是observer对象,subject对于后期没有数据更新时所添加的订阅者是不怎么友好的,因为不跟新数据时订阅者就不在收到返回的数值 const interval$ = interval(1000).pipe(take(10)); const subject = new Subject(); const observerA = { next: value => console.log('Observer A get value: ' + value), error: error => console.log('Observer A error: ' + error), complete: () => console.log('Observer A complete!'), }; const observerB = { next: value => console.log('Observer B get value: ' + value), error: error => console.log('Observer B error: ' + error), complete: () => console.log('Observer B complete!'), }; subject.subscribe(observerA); // 添加观察者A interval$.subscribe(subject); // 订阅interval$对象 setTimeout(() => { subject.subscribe(observerB); // 添加观察者B }, 1000); Import{BehaviorSubject}from’rxjs’; behaviorSubject 是subject的变种,最大的区别就是 behaviorSubject是用于保存最新的数值,而不是单纯的发送事件,会将最后一次发送的值作为当前值保存在内部属性中。 const subject = new BehaviorSubject(0); //BehaviorSubject小括号0代表的是状态 const observerA = { next: value => console.log('Observer A get value: ' + value), error: error => console.log('Observer A error: ' + error), complete: () => console.log('Observer A complete!'), }; const observerB = { next: value => console.log('Observer B get value: ' + value), error: error => console.log('Observer B error: ' + error), complete: () => console.log('Observer B complete!'), }; subject.subscribe(observerA); // 添加观察者A // interval$.subscribe(subject); // 订阅interval$对象 subject.next(1); subject.next(2); subject.next(3); setTimeout(() => { subject.subscribe(observerB); // 添加观察者B }, 1000); Import {ReplaySubject}from’rxjs’; ReplaySubject 用于重复发送最近几次的值给订阅者 const subject = new ReplaySubject(2); //ReplaySubject后的2为最后两次发送的数值 const observerA = { next: value => console.log('Observer A get value: ' + value), error: error => console.log('Observer A error: ' + error), complete: () => console.log('Observer A complete!'), }; const observerB = { next: value => console.log('Observer B get value: ' + value), error: error => console.log('Observer B error: ' + error), complete: () => console.log('Observer B complete!'), }; subject.subscribe(observerA); // 添加观察者A // interval$.subscribe(subject); // 订阅interval$对象 subject.next(1); subject.next(2); subject.next(3); setTimeout(() => { subject.subscribe(observerB); // 添加观察者B }, 1000); Import{AsyncSubject}from’rxjs’; AsyncSubject他会在subject完成后才返回一个值 const subject = new AsyncSubject(); const observerA = { next: value => console.log('Observer A get value: ' + value), error: error => console.log('Observer A error: ' + error), complete: () => console.log('Observer A complete!'), }; const observerB = { next: value => console.log('Observer B get value: ' + value), error: error => console.log('Observer B error: ' + error), complete: () => console.log('Observer B complete!'), }; subject.subscribe(observerA); // 添加观察者A // interval$.subscribe(subject); // 订阅interval$对象 subject.next(1); subject.next(2); subject.next(3); subject.complete(); setTimeout(() => { subject.subscribe(observerB); // 添加观察者B }, 1000);
我们要实现angular的全局数据管理就需要用到 《BehaviorSubject》
二、angular服务文件
在app.module.ts中注册服务文件
import { SomeSharedService } from '@shared/window-service/window.service';
providers: [
...
SomeSharedService,
],
TS文件:service.module.ts
import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeSharedService } from './window.service'; export { SomeSharedService }; @NgModule() export class ServicesModule { static forRoot(): ModuleWithProviders { return { ngModule: ServicesModule, providers: [SomeSharedService], }; } }
TS服务文件名:window.service.ts
import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable() export class SomeSharedService { public globalVar: BehaviorSubject<any> = new BehaviorSubject({ dataCount1: 0, dataCount2: 0,
dataCount3: 0,
dataSum: 0,
}); settingKey(key, sumKey) { const globalVar = this.globalVar.getValue(); globalVar[key] -= 1; globalVar[sumKey] -= 1; this.globalVar.next(globalVar); } }
三、全局数据初始化
在全局公用组件中进行全局数据的初始化,具体怎么用看自己怎么考虑,页面刷新时数据都会重新向后台拿取数据;
ngOnInit(): void {
const source = timer(0, 30000);
const data = source.pipe(
mergeMap(val => {
return this.http.get('/admin');
}),
distinctUntilChanged(),
);
this.distinctSub = data.subscribe(res => {
this.someSharedService$.globalVar.next(res.data);
});
}
ngOnDestroy(): void {
this.distinctSub.unsubscribe();
}
因为业务需要 定时向后台请求一次数据更新,所以简单写了一下 ,如果不需要就只要放一个http请求就行了;
使用 this.someSharedService$.globalVar.next(res.data); 从全局服务SomeSharedService文件中分发文件;
四、订阅服务数据
在需要的页面订阅分发内容,且会保存最后一次的数据;
import { SomeSharedService } from '@shared/window-service/window.service';
constructor(
private someSharedService$: SomeSharedService,
) {}
...
this.someSharedService.globalVar.subscribe(res => {
if (!(this.cdr as ViewRef).destroyed) {
this.item = res;
this.cdr.detectChanges();
}
});
因为有一些数据渲染的问题 所以需要加一层判断,这就基本实现了从后台拿取数据,在多个页面进行展示;
五、实现数据修改及同步更新
import { SomeSharedService } from '@shared/window-service/window.service';
constructor(
private someSharedService$: SomeSharedService,
) {}
...
.subscribe(res => {
if (res.code !== 200) {
this.msg.error(res.message);
return;
}
this.someSharedService$.settingKey('dataCount1', 'dataSum');
})
当完成数据请求后,调用我们内部方法,就可以在本地同步实现更新数据了;
其中原理将在后期有空时更新。
subject
原文地址:https://www.cnblogs.com/bomdeyada/p/11718943.html
- 如何使用Nginx实现Impala负载均衡
- pwnhub年前最后一战——“血月归来”writeup
- MHN中心服务器搭建与树莓派蜜罐部署
- 如何在CDH中启用Spark Thrift
- 让你的以太坊 DApps 盈利的 6 种方法
- 赛博地球杯初赛第三名,ChaMd5安全团队的writeup
- 如何在Windows Server2012搭建DNS服务并配置泛域名解析
- 如何使用HBase快照实现跨集群全量与增量数据迁移
- 为什么你应该学习搭建区块链应用
- 如何在Hue中创建Ssh的Oozie工作流
- 如何在启用Sentry的CDH集群中使用UDF
- 区块链太火,小心你的服务器被动挖矿
- PY交易之简单沙盒绕过
- CentOS6.5安装CDH5.13
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux-远程拷贝(scp命令)
- Kettle使用JavaScript代码处理数据
- Hadoop入门---(wordcount)统计单词出现的次数
- JS去除字符串的空格
- insertionSoft(插入排序) 2.1-1 And 重写insertionSoft 2.1-2
- Swagger-Springboot-mybatis-mysql
- Python+java+websocket+SpringMVC实时监控数据库中的表
- 基于Java图形界面的IPV4与网址的地址解析器
- 如何在千里之外能访问自己的电脑?(FRP)
- 三分钟Docker-镜像、容器实战篇
- 看懂今天这个!你就是个真正的javaer!
- 猿进化系列7——一文搞懂IO
- 猿进化系列13——一文搞懂MVC相关框架套路
- 猿进化系列16——实战之一学会SQL开发正确姿势
- 猿进化系列17——实战之一文学会前后端分离套路