angular6 内置管道(过滤器)

文章参考

1. Angular管道的使用

管道说明

1. angular中的管道(pipe) 以及自定义管道-适用于angular4 angualr5 angualr6 angular7
2. angular中的管道(pipe)是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等。

常用的管道（pipe）

1. 大小写转换
   {{str | uppercase}} //转换成大写
   {{str | lowercase}} //转换成小写

2. 日期格式转换

{{today | date:'yyyy-MM-dd HH:mm:ss' }}

4. 小数位数

{{p | number:'1.2-4'}}

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
保留2~4位小数

5. JSON对象序列化

{{ { name: 'semlinker' } | json }}  //显示结果： Output: { "name": "semlinker" }

方便代码调试

6. 字符串截取——slice

{{ 'semlinker' | slice:0:3 }} //显示结果 Output: sem

注意传递参数的方式

7. 管道链

{{ 'semlinker' | slice:0:3 | uppercase } //Output: SEM

自定义管道

自定义管道的步骤：

1. 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
2. 实现 PipeTransform 接口中定义的 transform 方法

可以参考angular6自定义管道