Angular2：为xhr调用创建通用加载程序服务

我正在尝试使用angular2构建一个具有更多可重用组件的小应用程序。在这里，我想要一个加载程序服务，它在每次xhr调用时都会执行

这就是我想到的

使用承诺

export class SpinnerService {

    showSpinner = false;

    spinnerPromise(observableToWaitFor: Observable<any>, text?: string): Promise<any> {
        this.showSpinner = true;
        return promiseToWaitFor.toPromise()
            .then((data) => { this.showSpinner = false; return data; });
    }   

}  

在某种程度上它还可以工作。但是我不太相信这种用法，因为它限制了AuthService使用Promise

使用可观察的

我是使用Observable的初学者，所以我不知道实现一个通用加载器服务有多困难或容易

这就是我试过的

@Injectable()
export class SpinnerService {

    showSpinner = false;
    public consumer: ReplaySubject<any> = new ReplaySubject(1);

    spinnerPromise(observableToWaitFor: Observable<any>, text?: string) {
        this.showSpinner = true;
        return observableToWaitFor.subscribe(
            response => this.consumer.next(response),
            error => { this.showSpinner = false; },
            () => { this.showSpinner = false; }
        );
    }

}

@Injectable（）
出口级喷丝板服务{
showSpinner=false；
公共消费者：ReplaySubject=新ReplaySubject（1）；
喷丝头承诺（observableToWaitFor:Observable，文本？：字符串）{
this.showSpinner=true；
返回observableToWaitFor.subscribe(
response=>this.consumer.next（响应），
错误=>{this.showSpinner=false；}，
（）=>{this.showSpinner=false；}
);
}
}

---

这将返回订阅。但是有没有一种方法可以在不订阅showSpinner的情况下更新showSpinner

最终让它工作了..我要做的唯一改变就是像这样使用

最终

export class SpinnerService {

    showSpinner = false;
    spinnerPromise(observableToWaitFor: Observable<any>, text?: string) {
        this.showSpinner = true;
        return observableToWaitFor.finally(() => this.showSpinner = false);            
    }
}

出口级喷丝板服务{
showSpinner=false；
喷丝头承诺（observableToWaitFor:Observable，文本？：字符串）{
this.showSpinner=true；
返回observeToWaitFor.finally（（）=>this.showSpinner=false）；
}
}

您可以使用

.do（）

来执行副作用，但这假设您稍后仍将订阅可观察对象。@martin如果api调用失败，.do（）还会执行吗？

do（）

需要三次回调。对于

下一步

，

错误

和

完成

发出信号，以便您可以选择要处理的内容。您可以创建一个自定义的通用组件，而不是将其作为服务来创建，就像在这个@Aravind中一样，我已经有了一个组件SpinnerComponent，它与这个SpinnerService交互，该SpinnerService显示/隐藏加载程序。

export class SpinnerService {

    showSpinner = false;
    spinnerPromise(observableToWaitFor: Observable<any>, text?: string) {
        this.showSpinner = true;
        return observableToWaitFor.finally(() => this.showSpinner = false);            
    }
}