[发明专利]一种前端状态变更管理的实现方法及系统

说明书

本发明公开了一种前端状态变更管理的实现方法及系统，属于前端Angular技术框架，本发明要解决的技术问题为如何实现在界面元素变化时刷新元素状态的逻辑，同时减少重复请求后端的次数，采用的技术方案为：该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理。该系统包括服务创建模块、Subject对象订阅模块、服务实例引入模块、界面元素状态更新模块及Subject的监听取消模块。

技术领域

本发明属于前端Angular技术框架，主要是涉及angular组件交互和事件监听，具体地说是一种前端状态变更管理的实现方法及系统。

背景技术

Angular是一款优秀的前端框架，现在已经被广泛应用。它的目标是透过MVC模式(MVC)功能增强基于浏览器的应用，使开发和测试变得更加容易，框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。

前端对界面的一些元素添加状态管理是主流的趋势。通过界面样式和交互动效让用户可以更加清晰的感知自己的操作。用户操作之后，页面元素的变化可以清晰的展现当前的状态。但是如果用户操作之后，都去编写一段代码去刷新所有相关元素，所有的刷新逻辑是独立的，部分代码是重复的。代码可读性差，重复请求后端数据，缺少统一的逻辑。故如何实现在界面元素变化时刷新元素状态的逻辑，同时减少重复请求后端的次数是目前现有技术中急需解决的技术问题。

发明内容

本发明的技术任务是提供一种前端状态变更管理的实现方法及系统，来解决如何实现在界面元素变化时刷新元素状态的逻辑，同时减少重复请求后端的次数的问题。

本发明的技术任务是按以下方式实现的，一种前端状态变更管理的实现方法，该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理。

其中，该方法的前提条件：在Angular的父子组件之间监控界面元素状态的变更，如果只是监控兄弟组件，可以给其包装一个父组件来实现。

作为优选，该方法的具体如下：

S1、声明一个服务，该服务注入父子组件所在的模块或者注入父组件；

S2、组件内初始化时订阅服务中的Subject对象；

S3、子组件通过构造函数引入服务实例；

S4、当请求后端接口时，设置loading提示信息或者更新中等中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

S5、父界面关闭时，取消对服务中Subject的监听。

更优地，所述步骤S1中声明一个服务，该服务注入父子组件所在的模块或者注入父组件具体如下：

S101、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

S102、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象。

更优地，所述步骤S2中组件内初始化时订阅服务中的Subject对象的具体如下：

S201、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

S202、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态。