Angular4+ 頁面切換 顯示進度條

　　使用ngx-progressbar 插件可以通過簡單幾句代碼實現loading加載效果。

　　npm install ngx-progressbar --save

　　在app.module.ts文件中，我們需要引用NgProgressModule,然后添加到NgModule的imports中。在公共頁面添加標簽ng-progress，默認效果是紅色。想要修改顯示特效。可以查看https://www.npmjs.com/package/ngx-progressbar#ngprogresscomponent-options-inputs 。

　　全局加載動作條代碼：

　　

...
import { NgProgressModule, NgProgressBrowserXhr } from 'ngx-progressbar';
import { BrowserXhr } from '@angular/http';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgProgressModule,
    HttpModule
  ],
  providers: [
    {provide: BrowserXhr, useClass: NgProgressBrowserXhr}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

　　而我們想要在單個接口中使用加載動作條。需要在http方法中使用progressService的方法：

ngOnInit() {
    const sampleUrl = 'http://bla.com';

    this.progressService.start();
    setTimeout(() => {
      this.progressService.set(0.1);
    }, 1000);
    setTimeout(() => {
      this.progressService.inc(0.2);
    }, 2000);
    this.http.get(sampleUrl)
      .subscribe((response) => {
        this.progressService.done();
        this.posts = response.json();
      });
}

　　這樣加載接口時，頁面頂部會顯示加載動畫。