Angular4+ 页面切换显示进度条

最新推荐文章于 2024-11-20 14:04:49 发布

转载最新推荐文章于 2024-11-20 14:04:49 发布 · 751 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wlxll/p/7656770.html

文章标签：

#javascript #ViewUI

本文介绍如何使用ngx-progressbar插件实现加载条效果。通过简单的步骤，在Angular项目中引入并配置该插件，实现全局及特定接口请求时的加载动画。

　　使用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 。

　　全局加载动作条代码：

 1 ...
 2 import { NgProgressModule, NgProgressBrowserXhr } from 'ngx-progressbar';
 3 import { BrowserXhr } from '@angular/http';
 4 ...
 5 
 6 @NgModule({
 7   declarations: [
 8     AppComponent
 9   ],
10   imports: [
11     BrowserModule,
12     NgProgressModule,
13     HttpModule
14   ],
15   providers: [
16     {provide: BrowserXhr, useClass: NgProgressBrowserXhr}
17   ],
18   bootstrap: [AppComponent]
19 })
20 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();
      });
}

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

转载于:https://www.cnblogs.com/wlxll/p/7656770.html