快速上手（PipesDirectivesModule）
安装
npm i @interaction/pipes-directives
介绍
PipesDirectivesModule包含五个管道
| 名称 | 含义 |
|---|---|
| find | 前端搜索 |
| mapPipe | Map管道 获取map中 指定key的值 |
| replace | 将 null值、空值、N/A值、undefined 转为 '-' |
| typeConversion | 字符串转Number |
| sanitizers | DomSanitizer防范XSS的安全 |
| formatNumber | 数字格式转换 |
导入
import { PipesDirectivesModule } from '@interaction/pipes-directives';
使用
find的使用：包含三个参数
- value 是被搜索的列表，必传项，下面案例中的findList(可以是对象类型也可以是字符串类型)
- keyword 搜索的关键词，必传项，下面案例中的searchKey(字符串类型)
- args 是对应item中的字段名，指搜索的目标字段，非必传项，可以传多个字段名，下面案例中的'name'和'id'，字符串类型
<ul>
<li *ngFor="let item of findList | find : searchKey : 'name' : 'id'"></li>
</ul>mapPipe的使用：包含两个参数
- map 是被搜索的列表，下面案例中的list，Map类型
- value 键值对的键，下面案例中的item.key
<ul>
<li *ngFor="let item of list | async | mapPipe: item.key"></li>
</ul>replace：包含一个参数
- value 要被替换的值，下面案例中的value，可以是null值、空值、N/A值、undefined值
<div>{{value | replace}}</div>typeConversion：包含一个参数
- value 要被替换的值，下面案例中的stringsId
<div>{{stringsId | typeConversion}}</div>sanitizers：包含两个参数
- value 需要净化的内容
- type 内容类型，包含 url,html,style,script,resourceUrl
<img [src]="imgUrl | sanitizers : url">
<p [innerHTML]="htmlContent | sanitizers : html"></p>
<div [style.background]="color | sanitizers : style"></div>
<iframe [src]="surl | sanitizers : resourceUrl"></iframe> formatNumber的使用：包含三个参数
- value 将要被转换的数值
- factor 位数
- mapField[] ['', '万', '亿', '万亿']
<div>{{ 50000 | formatNumber : 4 : ['', '万', '亿', '万亿'] }}</div>