Angualr4.0中的内置管道是怎样的?

幽梦林子

Angualr4.0中的内置管道是怎样的?

DatePipe - 对日期/时间数据进行格式变换
在模板中使用date来引用DatePipe。参数用来指定格式：

1. 
   
2. 
   
3. {{ day | date:'yyMMdd'}}
   

复制代码

JsonPipe - 将JSON对象转换为字符串，
在模板中使用json来引用JsonPipe，其实现基于JSON.stringify()。 这个管道主要用于调试。

1. 
   
2. {{ {x:1,y:2} | json }}
   

复制代码

PercentPipe - 将数值转换为百分比
在模板中使用percent来引用PercentPipe。参数格式同DecimalPipe

1. 
   
2. 
   
3. {{ 1.23456 | percent:'1.2-3' }}
   

复制代码

SlicePipe - 提取输入字符串中的指定切片
在模板中使用slice来引用SlicePipe。第一个参数指定切片的起始索引， 第二个参数指定切片的终止索引的下一个。

1. 
   
2. 
   
3. {{ '01234567890' | slice:1:4 }}
   

复制代码

UpperCasePipe - 将输入字符串变换为大写
在模板中使用uppercase来引用UpperCasePipe。

1. 
   
2. 
   
3. {{ "this is a demo" | uppercase }}
   

复制代码

LowerCasePipe - 将输入字符串变换为小写
在模板中使用lowercase来引用LowerCasePipe。

1. 
   
2. 
   
3. {{ "WHAT A WONDERFUL WORLD" | lowercase }}
   
4. 
   
5.       this.day = new Date();
   
6.       this.pi = Math.PI;
   
7. 
   
8.     <p>{{ "01234567890" | slice:5:9}}</p>
   
9.     <p>{{ "hello angular4.0!" | uppercase }}</p>
   
10.     <p>{{ "HELLO ANGULAR4" | lowercase }}</p>
    
11.     <p>{{ pi | number:'3.1-10' }}</p>
    
12.     <p>{{ pi | percent:'3.1-10'}}</p>
    
13.     <p>{{ day | date:'yMMdd'}}</p>

复制代码