對於HTTP請求ng2-slim-loading-bar

我需要使用ng2-slim-loading-bar來顯示從後端獲取請求時的進度。對於HTTP請求ng2-slim-loading-bar

這是我的組件。

ngOnInit(){ 
     this._slimLoader.start(); 
     this._productsAdminService.getProducts() 
      .subscribe(products => { 
       products.forEach(function(product){ 
        if(product.cat_id === 1) product.catName = 'Dota Shirts'; 
        if(product.cat_id === 2) product.catName = 'Gym Shirts'; 
        if(product.cat_id === 3) product.catName = 'Car Shirts'; 
       }); 
       this.products = products; 
       console.log(this.products); 
       this._slimLoader.complete(); 
      }, 
      err => console.log(err)); 
    }

這個請求應該需要3-5秒從請求解決，所以我需要使進度條加載像這樣。這裏的問題是，當我加載頁面時，在回調完成之前什麼都不會顯示。展示我的所有產品後，它會立即顯示然後消失。

這裏有什麼問題嗎？請幫忙。

來源

2017-02-11 Mix Austria

我以前也遇到同樣的問題。當您使用this._slimLoader.start();時，它會從0％開始加載欄，並且它會緩慢增加。這意味着你不能從瀏覽器邊緣開始直觀地看到它。

除了使用.start()之外，還可以將進度設置爲某個百分比，例如this._slimLoader.progress = 70;，然後在請求完成後再致電.complete();。

我相信YouTube使用這種風格。

來源

2017-02-13 19:13:42 ToDo

由於todo的回答提到，酒吧從0％開始。您需要將其設置爲20％並致電start()。然而，start()只是在一定的時間間隔內增加，當它達到100％時，條塊會消失，錯誤地表明加載已完成。如果start()接受每個步驟調用的回調，這樣會很好，因此您可以將其停止在90％。但事實並非如此。

所以這是我在我們的項目（紅帽自動遷移工具包）做的事：

在我們的HTTP服務的包裝（處理的OAuth），我們觸發一個事件，
，然後通過抓我們的LoadingIndicatorService。
LoadingIndicatorService
- 包裹SlimLoaderBarService，
- 並跟蹤有多少HTTP請求中有進展。
- 然後它計算百分比，並將其設置爲20到90％的比例。
- 當所有的HTTP請求完成後，它會在90％左右停留大約一秒鐘，然後調用complete()。

如果你必須爲每個導航步驟的多個請求，這看起來很自然，並提供了良好的UX。如果您通常只有1個請求，那麼您可能需要調整基於CSS的動畫（使其更長）或使用start()。

以下是一些關鍵的部分代碼：

@Injectable() 
export class LoadingIndicatorService { 

    constructor(
     private _slimBarService: SlimLoadingBarService, 
     private _eventBusService: EventBusService, 
    ) { 
     // Register the LoadingSomething event listeners. 
     this._eventBusService.onEvent 
      .filter(event => event.isTypeOf(LoadingSomethingStartedEvent)) 
      .subscribe((event: LoadingSomethingStartedEvent) => this.loadingStarted()) 
     this._eventBusService.onEvent 
      .filter(event => event.isTypeOf(LoadingSomethingFinishedEvent)) 
      .subscribe((event: LoadingSomethingFinishedEvent) => this.loadingFinished()) 
    } 

    public getSlimService(){ 
     return this._slimBarService; 
    } 


    private counter: number = 0; 
    private max: number = void 0; 

    private reset() { 
     this.counter = 0; 
     this.max = void 0; 
    } 

    public loadingStarted(){ 
     this.counter++; 
     this.max = this.counter; 
     this.updateProgress(); 
    } 

    public loadingFinished(){ 
     this.counter--; 
     this.updateProgress(); 
    } 

    private updateProgress() { 
     if (this.counter == 0) { 
      this._slimBarService.height = "2px"; 
      this._slimBarService.visible = true; 
      this._slimBarService.progress = 95; 
      this.max = void 0; 
      Observable.timer(700).subscribe(() => { 
       this._slimBarService.complete(); 
      }); 
     } 
     else { 
      // max - counter = finished. 
      // If the things to load are added after something loaded, the progress would go back. 
      // But let's rely on that loading will start fast at the beginning. 
      // Start at 20, jump to 90. 
      let percent = 20 + 70 * (1 - (this.max - this.counter)/this.max); 
      this._slimBarService.height = "3px"; 
      this._slimBarService.color = "#39a5dc"; 
      this._slimBarService.visible = true; 
      this._slimBarService.progress = percent; 
     } 
    } 

} 


    let responseObservable2 = responseObservable.do(
     () => console.log("Request SUCCEEDED"), 
     () => console.log("Request FAILED"), 
     () => { 
      console.log("Request FINISHED"); 
      if (this._eventBus) { 
       console.log("Request FINISHED, firing"); 
       this._eventBus.fireEvent(new LoadingSomethingFinishedEvent(responseObservable)) 
      } 
     } 
    );

HTTP服務的包裝：

@Injectable() 
export class WindupHttpService extends Http { 

    private configureRequest(method: RequestMethod, f: Function, url: string | Request, options: RequestOptionsArgs = {}, body?: any): Observable<Response> { 
     let responseObservable: Observable<Response> = ... 

    ... 

    console.log("Load STARTED"); 
    if (this._eventBus) 
     console.log("Load STARTED, firing"); 
    this._eventBus.fireEvent(new LoadingSomethingStartedEvent(responseObservable)); 

    return responseObservable2; 
}

有關完整代碼，搜索github.com項目終結。

來源

2017-07-25 16:09:53

對於HTTP請求ng2-slim-loading-bar

回答

相關問題