Angular2 RC1 实现加载指示器的最佳方法

Question

我正在尝试实现一个应用程序范围的加载栏。这样，当用户单击我的应用程序中的任何链接并且下载数据时，它应该在顶部显示一个加载栏。

类似这样的事情:

http://chieffancypants.github.io/angular-loading-bar/

目前，我所做的是添加一个带有 bool 属性 isLoading 的全局单例服务。在我的主应用程序组件模板中，我添加了 Angular Material2 进度条。

<md-progress-bar mode="indeterminate" *ngIf="_globalService.isLoading"></md-progress-bar>

现在，每当我发起 http 请求时，我都会在该组件中将该服务的 isLoading 属性设置为 true。当该请求完成时，我将其设置为 false。

在我当前的情况下，我必须将服务注入(inject)到所有组件中，并手动将 isLoading 设置为 true 或 false。

我想知道是否有任何方法可以捕获应用程序中所有 ajax 请求的启动和完成，以便我只需订阅该请求而不必手动处理它。

Answer 1

我可以看到两种方法来完成你所追求的事情。第一个是将所有的Http请求抽象到专门的服务，第二个是将Http服务包装起来。

服务。无论如何，从组件发出 Http 请求可能不是最好的主意，因此更好的方法是将 http-stuff 移动到专用服务中并设置 _globalService.isLoading旗帜从那里。组件不应该知道这些事情，它只会关心“getAccounts”等事情。因此，抽象实际的 Http 请求可以使加载指示器标志从组件代码中隐藏。

包装默认的 Http 服务。完全有可能将 Http 服务包装到另一层中，从 isLoading 开始可以设置标志。在这种情况下，组件代码也不知道有关加载指标机制的任何信息。

可能的包装可能如下所示:

import {Http} from '@angular/http';
import {Injectable} from '@angular/core';
import {GlobalService} from './globalService';

export class HttpLoading extends Http {

  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService ) {
    super(backend, defaultOptions);
  }

  get(url: string, options?: RequestOptionsArgs) {
    this._globalService.isLoading = true;
    return super.get(url, options)
      .map(res => {
        this._globalService.isLoading = false;
        return res;
      });
  }
}

并注册为

bootstrap(App, [
  GlobalService,
  HTTP_PROVIDERS,
  provide(Http, {
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService),
    deps: [XHRBackend, RequestOptions, GlobalService]
  })
])

演示: http://plnkr.co/edit/S5nSpscC3tIwX63lrBtO?p=preview