Question

我有一个使用http observable获取数据的表单。在加载数据并等待响应时，我想禁用提交按钮。

目前我已经在每个组件/表单上实现了状态代码，以便在调用subscribe方法之前将状态设置为运行，并在响应存在时禁用运行标志。

问题是我必须对每个组件/表单执行此检查。我想用一个模型来包装observable，该模型在发出请求之前设置状态信息。

什么是最好的方法？在请求发出之前，我没有找到添加函数的解决方案。 Observable之前没有功能。我也试过连接两个Observable。第一个仅用于表示第二个Observable正在启动。

是否有一种简单的方法以抽象方式监听可观察的开头。我想包装http服务来保持（开始/停止/运行/ ...）状态......

修改1：

这是我目前正在做的一些伪代码。我已经在每个可由按钮触发的observable上添加了这个状态持有者。我想删除这个重复的代码。

this.mystateHolder.start(); // sets running;error,success to false
this.myservice.updateSomething(mydata).subscibe(
   ok => mysateHolder.stop(false) // sets success to true and running to false
   error => mystateHOlder.stop(true, error) // sets error to true and running to false
)
<button [disabeld]="mystateHolder.isRunning()"></button>
<span *ngIf="mystateHolder.hasErrors()">mystateHolder.getErrorMessage()</span>

目标伪代码（可能）：

const state = this.myservice.updateSomething(mydata).state()
state.subscribe();
console.log(state.hasErrors())
console.log(state.isRunning())
console.log(state.success())

Answer 1

您可以做的一件事就是在进入所需状态之前进行所需的通话。这可以在您使用resolve参数的路由器中完成。（https://angular.io/api/router/Resolve如果您使用角度路由器，ui-router也提供此功能）。我能想到的另一件事就是检查按钮标签中的数据是否可用[disable]属性，如下所示：

<button [disable]="data === null">Submit</button>

或其他一些适合您的问题。

Angular 2 - http - Observable - 启动/停止/运行状态

1 个答案: