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的方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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();       }); }

　　这样加载接口时，页面顶部会显示加载动画。