Angular2踩坑之自定义Pipe管道

遛狗的代码

于 2017-04-23 21:19:46 发布

阅读量1.2k

点赞数

分类专栏： AngularJS 文章标签： Angular2 Pipe

本文链接：https://blog.youkuaiyun.com/Brave_Coder/article/details/70546632

版权

本文介绍了Angular2中的自定义Pipe，将其比喻为工厂生产线模式，详细讲解了Angular2内置的8种管道和自定义管道的创建过程。重点讨论了如何在主模块中声明自定义管道以及在组件中使用它们。同时，通过对比纯管道和非纯管道处理日期与字符串的区别，阐述了管道的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从15年底接触的AngularJS,当时的感觉是除了难学还是难学，跟后来的React和Vue相比，到现在AngularJS1.x已经没有什么优势了，谷歌去年推出了Angular2（习惯上从2.0版本开始就不再加"JS"），今年3月推出了4.0版本，于是我开始爬坑之旅。

Pipe，管道，如果写过Gulp的朋友肯定非常熟悉，就是工厂的生产线加工模式，我只负责实现某个模块，做完就扔给下一个人，绝不越俎代庖。其实Pipe就是Angularjs中的过滤器，如果你对Angularjs比较熟悉，这些概念都不会陌生。

Angular自定义了8个管道，分别是DatePipe，JsonPipe，UpperCasePipe，LowerCasePipe，DecimalPipe，CurrencyPipe，PercentPipe，SlicePipe，

Pipe后面如果有参数，用":"间隔，不同的Pipe，有不同的格式化方式，我就不多说了，有兴趣的朋友可以参看文档。

自定义管道中，最重要的两点是引入Pipe对象和申明管道名称。

import {Pipe,PipeTransform} from "@angular/core";
@Pipe({
    "name":"upperCase",
    "pure":false
})
export class UpperCasePipe implements PipeTransform{


        transform(val:string):str

最低0.47元/天解锁文章