[发明专利]一种基于LowDB实现Angular非父子组件交互的系统及方法

说明书

本发明提供一种基于LowDB实现Angular非父子组件交互的系统及方法，属于互联网前端领域，主要解决的问题是Angular框架非父子组件之间无法在完全隔离的情况下实现数据交互的问题。Angular非父子组件的发送端先将打上标签的数据存储于LowDB中，接收端组件通过标签对LowDB进行数据的监听与接收，该方式实现发送端与接收端的完全隔离，互不相影响，解决了非父子组件间在完全隔离情况下的交互通信问题，并且通信双方都可作为数据的发送方与接收方，实现了数据的双向通信；同时实现了通信双方一对多、多对一、多对多的交互连接方式，一处存储，多端使用。数据读写分离，两种功能封装于不同模块，均可被发送端和接收端调用，同时增加数据删除与修改功能，增加数据操作的灵活性。

技术领域

本发明涉及互联网前端技术领域，特别涉及了一种解决Angular框架非父子组件完全隔离情况下的交互通信的系统及方法。

背景技术

Angular是一个前端Javascript框架，Angular是用TypeScript编写的，它将核心和附加功能实现为一组TypeScript库，很多程序员都用它来构建和维护复杂的网页应用。但Angular框架中存在一种应用场景却未能实现：两个完全隔离的非父子组件，在HTML展示层或service服务层都不被对方注入的前提下，实现数据的交互通信，且双方都可作为数据发送方与接收方。

Angular官方只提供了父子组件间的通信方式，并且需要将子组件注入到父组件HTML展示页或service服务层中，无法实现两个组件间内容的独立展示。

为了解决这一问题，可以使用浏览器本地存储作为非父子组件间数据交互的中间介质，从而解决交互双方完全隔离情况下的交互通信问题。但浏览器自身存储容量只有5M大小，限制了大容量数据的交互传输。

发明内容

本发明所要解决的技术问题具体包括如下3方面：

一是为了解决Angular框架非父子组件在完全隔离的情况下实现数据交互的问题。

二是针对浏览器本地存储容量，解决Angular框架非父子组件交互数据大小限制问题。

三是为了解决Angular框架非父子组件通信双方角色固定且无法实现一对多、多对一、多对多等模式问题。

本发明的技术任务是针对现有技术的不足，基于浏览器存储作为中间介质的思想，通过使用LowDB文件数据库，连接Angular非父子组件双方，解决了交互两端完全隔离、可传输大量数据的问题，并且允许通信双方都可作为发送端或接收端，且数量不限。

本发明解决其技术问题所采用的技术方案是：

1、本发明提供一种基于LowDB实现Angular非父子组件交互的系统，包括：

发送端模块，即为非父子组件交互数据双方的发送端，每个发送端需要封装发送数据，为其打上标签flag_x；

发送端中间件模块，响应发送端请求，将数据存储于数据文件库模块中；

数据文件库模块，其核心载体使用LowDB文件数据库，用于存储非父子组件的交互数据；

接收端中间件模块，用于响应接收端请求，从数据文件库模块中获取数据；

接收端模块，即为非父子组件交互数据双方的接收端，每个接收端根据标签flag_x从数据文件库模块取所需数据，并对数据解封装使用；

附加功能模块，用于非父子组件操作数据。

方案优选地，所述LowDB文件数据库是一个轻量级的json文件数据库，可将数据存储为json格式保存于本地文件中。