5.2 预置管道 - RLwu/angular-start GitHub Wiki

预置参数

除了DecimalPipe,Angular2还预置了以下的管道用来对常见数据类型 进行转换:

DatePipe - 对日期/时间数据进行格式变换

在模板中使用date来引用DatePipe。参数用来指定格式:

<!--day:new Date('2014-01-01') 结果:'01/01/14'-->
{{ day | date:'yyMMdd'}}

JsonPipe - 将JSON对象转换为字符串,

在模板中使用json来引用JsonPipe,其实现基于JSON.stringify()。 这个管道主要用于调试。

<!--结果:'{x:1,y:2}'-->
{{ {x:1,y:2} | json }}

PercentPipe - 将数值转换为百分比

在模板中使用percent来引用PercentPipe。参数格式同DecimalPipe

<!--结果:123.456% -->
{{ 1.23456 | percent:'1.2-3' }}

SlicePipe - 提取输入字符串中的指定切片

在模板中使用slice来引用SlicePipe。第一个参数指定切片的起始索引, 第二个参数指定切片的终止索引的下一个。

<!--结果:'123'-->
{{ '01234567890' | slice:1:4 }} 

UpperCasePipe - 将输入字符串变换为大写

在模板中使用uppercase来引用UpperCasePipe。

<!--结果:THIS IS A DEMO-->
{{ "this is a demo" | uppercase }}

LowerCasePipe - 将输入字符串变换为小写

在模板中使用lowercase来引用LowerCasePipe。

<!--结果:what a wonderful world-->
{{ "WHAT A WONDERFUL WORLD" | lowercase }}