Question

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

这样的事情：

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请求的启动和完成，所以我只是订阅它并且不必手动处理它。

Answer 1

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

<强>服务即可。无论如何，从组件发出Http请求可能不是最好的想法，因此更好的方法是将http-stuff移动到专用服务中并从那里设置_globalService.isLoading标志。组件不应该知道这些事情，它只关心＆＃34; getAccounts＆＃34;等等。因此抽象实际的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

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

1 个答案: