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