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

Question

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

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

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

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

有没有一种简单的方法来以抽象的方式收听 observable 的开始。我想包装 http 服务来保存 (start/stop/running/...) 状态...

编辑 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>

或其他适合您问题的检查。