显示每个 http 请求的加载栏 angular2

Question

我正在将我的应用程序从 angularjs 移动到 angular2。我使用的是 Angular Loading Bar 即

An automatic loading bar using angular interceptors. It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

More info

我正在尝试在 angular2 中找到类似的插件。我遇到了一些像 ng2-slim-loading-bar 但在这里我必须手动管理进度。对于每个 http 请求，我都必须手动启动进度条，然后完成它。

那么，是否有可用的现有插件可以完全完成 Angular Loading Bar 在 angularjs 中的功能。或者我怎样才能修改任何现有的插件来表现得像这样。

Answer 1

您可以在 HTTP 请求运行时使用 ngx-progressbar. It can automatically 显示进度条。

您所要做的就是：

1- 导入并提供 NgProgressCustomBrowserXhr

import { NgProgressCustomBrowserXhr } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,
 ],
 imports: [
   // ...
   NgProgressModule
 ]
})

2- 在您的模板中像下面那样使用它。

<ng-progress></ng-progress>

The progress will start and complete automatically with your HTTP requests. no need to use NgProgressService to call start()/done() manually.

Answer 2

这是我在我们的项目中所做的（Red Hat Automated Migration Toolkit）：

在我们的 HTTP 服务包装器（处理 OAuth）中，我们触发一个事件，
然后被我们的 LoadingIndicatorService.
LoadingIndicatorService
- 包装 SlimLoaderBarService,
- 并跟踪有多少 HTTP 请求正在进行中。
- 然后它会计算百分比并将其调整到 20% 到 90% 的范围内。
- 当所有 HTTP 请求完成后，它会保持在 90% 大约一秒钟，然后调用 complete()。

如果您对每个导航步骤有多个请求，这看起来很自然并且提供了良好的用户体验。如果您通常只有 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 项目 Windup。

Answer 3

选中@ngx-loading-bar，它会自动为 Http 调用和路由添加进度条

https://github.com/aitboudad/ngx-loading-bar

显示每个 http 请求的加载栏 angular2

Show loading bar for every http request angular2

loading

progress-bar

angular-http-interceptors

angular