Angular 5+加载蒙版组件

Angular 5+加载蒙版组件
插件名称 ngx-loading-mask
发布时间 2020年6月19日
插件作者 haoliangwu

Angular 5+简单的load-mask UI组件。

特征

  •  全局配置
  •  可定制的加载代码片段
    •  使用全局配置
    •  与templateDef
  •  遮罩容器指令
  •  可观察的事件
  •  余烬布局支持
  •  httpClient拦截器集成
  •  docs
  •  单元测试案例

安装:

# NPM
$ npm install ngx-loading-mask --save

设定档

  • snippet(SnippetConfig):加载代码段配置对象
    • imgUrl(string):加载片段uri,默认: null
    • size(number):摘要大小(以px为单位),默认值: 144
  • mask(MaskConfig):加载遮罩配置对象
    • bgColor(string):加载蒙版背景色,默认: rgba(255, 255, 255, .7)
  • clsMapping(ClsMapping):类后缀
    • snip(string):加载代码段类后缀,默认: ngx-loading-snip
    • mask(string):加载mask类后缀,默认: ngx-loading-mask
  • debug(boolean):切换调试模式,默认: false

基本用法

全局加载掩码

只需[ngxLoadingMask]在您的应用容器元素中声明或body

<div class="container" ngxLoadingMask>
    ...
</div>

局部加载面罩

与全局名称类似,只需将组名称声明为[ngxLoadingMask]

<div class="wrapper" [ngxLoadingMask]="'foo'">
    ...
</div>

切换蒙版

仅用于LoadingMaskService切换加载蒙版

// 展示mask 
this.service.showGroup(groupName)

// 隐藏mask 
this.toggleDone(groupName)

如果groupName为undefined,则其默认值为全局加载掩码组名,为切换本地掩码,您需要为其分配本地组名,例如foo或其他。