Angular的自定义进度栏– ngx-progress

Angular的自定义进度栏– ngx-progress
发布时间 2020年4月10日
插件作者 kKen94

一个Angular进度栏库,它使用微调器创建可自定义的灵活进度栏,以可视化http请求和/或路由更改,同时防止用户交互。

安装:

# NPM
$ npm install @kken94/ngx-progress --save

选择最适合您的模块。
有四个模块:

  • NgxProgressModule(拦截HTTP请求和路由器更改)
  • NgxProgressOnlyHttpModule(仅拦截http请求)
  • NgxProgressOnlyRouterModule(仅拦截路由器更改)
  • NgxProgressOnlyBar(自己管理进度栏)

将其中之一导入到您的module.ts中

import { NgxProgressModule } from '@kken94/ngx-progress';
@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    NgxProgressModule,
    ...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

并将其放入要覆盖的元素中。

注意:如果你想使用覆盖确保父元素具有位置:相对叠加的作品有position:absolutetop:0left:0

<div style="position: relative">
  <ngx-progress [overlay]="true"></ngx-progress>
  <table></table>
</div>

特性

  • NgxProgress支持多个请求。如果在执行进度期间触发了另一个请求,则在所有请求完成之前,bar将不会重置并继续运行。
  • NgxProgress可以被实例化多次。仅显示最深的一个