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 。

　　全局加载动作条代码：

 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

Angular4+ 页面切换显示进度条相关推荐

浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
异步上传文件显示进度条
异步上传文件显示进度条原文地址:异步上传文件显示进度条问题我们在写网站时难免会遇到需要上传文件的场景,但当上传大文件时比如5个G的文件直接用表单直接提交文件会出现页面卡顿.未响应等影响用户体验的 ...
jquery实现页面加载进度条(转)
实现原理: 根据页面执行js的顺序将遮罩层和loading图片最先显示出来,等到页面加载完成后,用js控制图片消失.既在网页的头部放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS ...
java excel进度条_导出excel 用easyui显示进度条(也适用于其他框架遮罩层，进度条)...
每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出.感知太差了~甚至用户误操作会导致服务器崩溃. 所以 ...
JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
.net导入Excel 并显示进度条
在程序开发过程中,往往会涉及到将Excel表格导入到数据库中的需求,而当excel表格内容很多的时候,我们往往会很难去捕捉它的执行过程进度和一些错误信息,此时我们便可以通过以下方法去解决这些难题,具体 ...
【vue页面数据请求进度条--页面爱心--借助插件实现页面防抖-echarts实现自适应】
1.页面爱心点击出现随机颜色小爱心它是一个js文件实现的我们首先创建一个love.js文件,然后把下面代码拿过去并导出 export function love() {;(function (w ...
仿iReader切换皮肤进度条
目录仿iReader切换皮肤进度条定义属性文件: 实现代码: 简单测试代码: 仿iReader切换皮肤进度条标签(空格分隔): 自定义View 本以为使用paint.setXfermode(ne ...
文件上传(显示进度条、上传速度)
XMLHttpRequest对象使用XMLHttpRequest对象实现数据交互. //创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); //le ...

Angular4+ 页面切换显示进度条

Angular4+ 页面切换显示进度条相关推荐

最新文章

热门文章

Angular4+ 页面切换 显示进度条

Angular4+ 页面切换 显示进度条相关推荐

最新文章

热门文章

Angular4+ 页面切换显示进度条

Angular4+ 页面切换显示进度条相关推荐