open-index/open-npm huggingface dataset:
npm package: @interaction/pipes-directives
Description: angular8.0+ pipe directive
Author: miyoko0505
Latest version: 0.1.4

# 快速上手（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'，字符串类型

```html

<ul>
    <li  *ngFor="let item of findList | find : searchKey : 'name' : 'id'"></li>
</ul>
```

mapPipe的使用：包含两个参数
- map 是被搜索的列表，下面案例中的list，Map类型
- value 键值对的键，下面案例中的item.key

```html
<ul>
    <li  *ngFor="let item of list | async | mapPipe: item.key"></li>
</ul>
```
replace：包含一个参数
- value 要被替换的值，下面案例中的value，可以是null值、空值、N/A值、undefined值

```html
<div>{{value | replace}}</div>
```

typeConversion：包含一个参数
- value 要被替换的值，下面案例中的stringsId

```html
<div>{{stringsId | typeConversion}}</div>
```
sanitizers：包含两个参数
- value 需要净化的内容
- type 内容类型，包含 url,html,style,script,resourceUrl

```html
<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[] ['', '万', '亿', '万亿']

```html
<div>{{ 50000 | formatNumber : 4 : ['', '万', '亿', '万亿'] }}</div>

```