ionic3 以及angular5中的内置管道（过滤器）

angular5中的管道，和angualrjs1.x的过滤器有些详相似，可以让我们在模板中调用方法。

下面我们看看ionic3 以及angular5中的内置管道（过滤器）：

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 }}

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 }}
,

    <p>{{ "01234567890" | slice:5:9}}</p>
    <p>{{ "hello angular4.0!" | uppercase }}</p>
    <p>{{ "HELLO ANGULAR4" | lowercase }}</p>  
    <p>{{ day | date:'yMMdd'}}</p>

ionic3 以及angular5中的内置管道（过滤器）

文章分类