为Angular2中的每个HTTP请求显示加载条

Question

我正在将我的应用程序从angularjs迁移到angular2。我使用的是Angular Loading Bar，它是：

使用angular拦截器自动显示加载进度条。只需将其包含为依赖项即可自动工作，并自动显示$http请求的进度。

更多信息

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

所以，是否有现有的插件可以像angularjs中的Angular Loading Bar一样完全完成此操作？或者如何修改任何现有插件以实现此功能。

- undefined

Answer 1

您可以使用ngx-progressbar。它能够在HTTP请求运行时自动显示进度条。

您需要做的只是：

1- 导入并提供NgProgressCustomBrowserXhr。

import { NgProgressCustomBrowserXhr } from 'ngx-progressbar';

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

2- 在模板中像下面这样使用它。

<ng-progress></ng-progress>

进度将随着您的HTTP请求自动开始和完成。不需要手动使用NgProgressService调用start()/done()。

- Radouane ROUFID

---

我遇到了错误..找不到名为NgProgressModule的模块。我正在使用angular-cli来开发我的应用程序。我已经安装了该软件包，并将其添加到了angular-cli.json文件中的脚本标记下。我是否漏掉了什么？ - undefined

我已经修复了之前的问题.. 现在遇到了这个错误: 我收到了错误消息.. 未捕获的 TypeError: 无法读取未定义的属性'core'我不确定我错在哪里。 - undefined

您可以在所有页面中显示进度条。 - Radouane ROUFID

请在 angular-cli.json 文件中删除您添加的脚本。 - Radouane ROUFID

你太棒了！你准确地找到了那个问题。我把它移除了，现在它可以正常工作了。 - undefined

Answer 2

这是我在我们的项目（Red Hat自动迁移工具包）中所做的事情：

• 在我们的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;
}

完整的代码，请搜索Windup项目的github.com。

- Ondra Žižka

Answer 3

请检查@ngx-loading-bar，它会自动为Http调用和路由添加进度条。

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

- Reza