Angular2 RC1最好的方法來實現加載指標

我想實現一個應用程序範圍，加載欄。因此，當用戶單擊我應用程序中的任何鏈接並且正在下載數據時，它應該在頂部顯示一個加載欄。Angular2 RC1最好的方法來實現加載指標

事情是這樣的：

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

目前，我做了什麼添加一個全球單獨服務與布爾屬性，isLoading。在我的主要應用程序組件模板中，我添加了角度材質2進度條。現在

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

，每當我發起一個HTTP請求，我將在該組件isLoading該服務的屬性設置爲true。當這個請求完成時，我將它設置爲false。

在我目前的情況下，我必須在我的所有組件中注入服務，並手動將isLoading設置爲true或false。

我想知道是否有任何方法來捕獲我的應用程序中所有ajax請求的啓動和完成，以便我只訂閱它，而不必手動處理它。

來源

2016-05-29 Naveed Ahmed

我可以看到兩種方式來做你以後的事情。第一個是將所有Http請求抽象爲專用服務，第二個是包裝Http服務。

服務。從組件發出Http請求可能不是最好的辦法，因此更好的方法是將http-stuff移動到專用服務中並從那裏設置_globalService.isLoading標誌。組件不應該知道這些事情，它只會關心諸如「getAccounts」等事情。因此，抽象實際的Http請求可能會使組件代碼隱藏加載指示器標誌。

環繞默認Http服務。完全可以將Http服務封裝到一個可以設置標誌的層中。在這種情況下，組件代碼也不會知道加載指示器機器的任何事情。

可能的包裝可能是這個樣子：

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

來源

2016-05-29 10:38:11 dfsq

謝謝您的回覆這麼多dfsq，但是我收到當我嘗試第二種方法時出現錯誤。錯誤\t TS2322 \t類型'Observable '不可分配給類型'Promise '。類型'Observable '中缺少屬性'then'。 –

錯誤\t TS2415 \t類'HttpLoading'錯誤地擴展了基類'Http'。 'get'屬性的類型不兼容。類型'（url：string，options ?: RequestOptionsArgs）=> Promise '不可分配給類型'（url：string，options ?: RequestOptionsArgs）=> Observable '。鍵入'Promise '不可分配爲鍵入'Observable '。類型'Promise '中缺少屬性'_isScalar'。 –

它應該是'get（url：string，options？：RequestOptionsArgs）：Observable {...}'並從'rxjs''添加'import {Observable}。 – dfsq

Angular2 RC1最好的方法來實現加載指標

回答

相關問題