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

Angular2 RC1 Best Approach to implement loading indicator

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

像这样:

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

目前,我所做的是添加一个带有布尔值 属性 的全局单例服务,isLoading。在我的主要应用程序组件模板中,我添加了 angular material2 进度条。

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

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

在我目前的情况下,我必须在所有组件中注入服务并手动将 isLoading 设置为 true 或 false。

我想知道有没有什么方法可以捕获我的应用程序中所有 ajax 请求的启动和完成,这样我就可以订阅它,而不必手动处理它。

我可以看到两种方法来完成您想要的事情。第一个是将所有的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