Angular中的管道

        在Angular中的管道就是指处理原始值到显示值的一个方法。是不是很好理解。Angular中已经内置了10来个管道方法，我们自己也可以定义管道方法。

 

1. 内置管道

控制器中的代码是

birthday: Data = new Data();

在模版中加入显示一个生日

<p>我的生日是:{{birthday}}</p>

显示结果是: 我的生日是:Sub Feb 05 2018 17：57:28 GMT+0800(CST)

接下来我们用一个内置的data管道改造一下代码

<p>我的生日是:{{birthday | data}}</p>

现在显示的是: 我的生日是:Sub 5, 2019

• | 就是管道操作符。
• data 是管道函数。函数是可以带可选参数的。同时多个管道函数连在一起些{{birthday | data | uppercase}}

下面来一个带参数的管道函数

<p>我的生日是:{{birthday | data: `yyyy-MM-dd`}}</p>

显示结果是: 我的生日是:2019-02-05

2.自定义管道

命令行创建管道：ng g pipe pipe/xxx

• pipe 是管道命令
• xxx 代表管你想创建的道函数名
• pipe/xxx 代表你把这个类存放在pipe目录里