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

权利要求书

1.一种前端状态变更管理的实现方法，其特征在于，该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理；具体如下：

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

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

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

S2、组件内初始化时订阅服务中的Subject对象；具体如下：

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

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

具体如下：

S20201、获取配额信息，下一步执行步骤S20202；

S20202、创建按钮根据后端返回的配合变化信息，判断是否有剩余空间配额：

①、若有剩余配额，则执行步骤S20203；

②、若无剩余配额，则跳转至步骤S20204；

S20203、显示创建按钮为正常状态，下一步执行步骤S20205；

S20204、显示创建按钮是不能点击的置灰状态，下一步执行步骤S20205；

S20205、判断界面是否关闭：

①、若是，则跳转至步骤S20206；

②、若否，则跳转至步骤S20201；

S20206、结束；

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

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

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

2.根据权利要求1所述的前端状态变更管理的实现方法，其特征在于，所述步骤S3中子组件通过构造函数引入服务实例的具体如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。