@interaction/pipes-directives

快速上手（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>