因为工作需要，对时间字符串或者时间戳要进行变换后展示
原本angularJs给我们提供了DatePipe使用
但是考虑到像一些周六、周一这种类型或者几秒前、一小时前等
需要高度自定义的情况，系统提供的已经满足不了我们啦
思考
开始决定了自己写DateUtils来进行格式化，但是应用到html中就需要用
{{format(date)}}
的方式来写，后来还是决定自己开发下Pipe来进行整合，html中可以用管道的写法，ts中可以用方法的形式调用
创建Pipe组件
在根目录下或者自定义目录下生成文件夹，用cli来生成就好
ionic g pipe xxx
生成这样一个目录结构
默认模板生成了一个总的pipes.module.ts文件，用于放置多个自定义pipe
我们需要实现PipeTransform中的transform方法
这里简单介绍下transform方法，参数有value和一些条件参数，拿DatePipe来说
transform(value: any, format?: string, timezone?: string, locale?: string): string | null;
有三个辅助参数format、timezone、locale在实际使用中
{{ value | date:"format":"timezone":"locale"}}
多个参数之间用冒号分隔开，而且管道也可以连续使用，类似链式语法
{{value | date | uppercase}}
使用
上面引用部分已经简单介绍了pipe的调用方法，这里就不提了
在html中，|后面的部分就是你生成pipe组件时的name参数，注意不能带符号
如果就这样运行的话，一定会报错，提示找不到自定义的pipe，我们还需要在使用页面的module.ts文件里导入PipesModule，再运行就没问题了
网友评论