Angular管道

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

管道

管道就是vue中的过滤器，

管道可以在渲染模块的时候，处理渲染的数据

ng6内置了很多管道，我们可以在插值语法或者指令中直接使用

语法 {{ data | 管道名称 : 参数1 : 参数2 | 管道2 }}

当使用多个管道的时候，前一个管道的输出将作为后一个管道的输入

number

用来格式化数字的

默认每三位加一个逗号，默认保留三位小数

参数表示格式化模板

slice

用来截取的（可以是数组也可以是字符串）

第一个参数表示开始位置

第二个参数表示结束位置（不包括的）

date

用来处理日期的过滤器（十分强大）

参数就是格式化模板或者格式化模板名称

默认是mediumDate

格式化模板

y 年

M 月

d 日

E 星期

h|H 小时

m 分

s 秒

它们的个数不同，表示不同的含义

四位 通常是英文全称

三位 通常是英文简写

两位 通常是两位数

一位 通常是一位数

自定义管道

内置的管道是有限的，有时候要使用更多的管道，我们要自定义管道，跟自定义组件一样，我们可以通过指令创建

ng g pipe 管道名称

自定创建管道脚本文件，以及单测文件

更新了app.module.ts文件，全局声明了管道，因此可以在任何位置使用管道

在管道中，我们通过管道注解类Pipe注入信息

通过name属性定义管道的名称

管道类中的transform方法，表示格式化数据的方法，当数据改变会执行该方法

第一个参数表示处理的数据

从第二个参数开始，表示传递的参数

返回值就是渲染的数据

举例：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'tocamel'
})
export class TocamelPipe implements PipeTransform {
    transform(value: any, firstCharIsUpper?: boolean): any {
        // 将value转化成字符串
        value = String(value);
        // 首字母大写
        if (firstCharIsUpper) {
            // 首字母大写之后，拼接在一起
            value = value[0].toUpperCase() + value.slice(1);
        }
        // 匹配_-后面小写字母大写
        return value.replace(/[-_]([a-z])?/g, (match, $1 = '') => $1.toUpperCase())
        // console.log(arguments)
        // return 'hello';
    }
}