管道
用来转换数据渲染的格式,在 1.x 版本的时候称之为过滤器,在 4.x 称之为管道。
使用
格式:date_expression | date[:format[:timezone[:locale]]]
大写转换
<div>
<p ngNonBindable>{{ 'Angular' | uppercase }}</p>
<p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>
小写转换
<div>
<p ngNonBindable>{{ 'Angular' | lowercase }}</p>
<p>{{ 'Angular' | lowercase }}</p> <!-- Output: angular -->
</div>
JavaScript 对象序列化
<div>
<p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
<p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>
数值格式化
number | ‘n1.n2-n3’
- n1: 最少位整数位,不够补0,默认1
- n2:最少保留几个小数,不够补0,默认0
- n3:最多保留几个小数,默认3
<div>
<p ngNonBindable>{{ 3343.14159265 | number: '1.4-4' }}</p>
<p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>
日期格式化
@Component({
selector: 'date-pipe',
template: `<div>
<!--output 'Jun 15, 2015'-->
<p>Today is {{today | date}}</p>
<!--output 'Monday, June 15, 2015'-->
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<!--output '9:43 AM'-->
<p>The time is {{today | date:'shortTime'}}</p>
<!--output '2015-06-15 05:03 PM GMT+9'-->
<p>The custom date is {{today | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>
<!--output '2015-06-15 09:03 AM GMT+9'-->
<p>The custom date with fixed timezone is {{fixedTimezone | date:'yyyy年MM月dd目 HH:mm a z':'+0900'}}</p>
</div>`
})
export class DatePipeComponent {
today = Date.now();
fixedTimezone = '2015-06-15T09:03:01+0900';
}
字符截取
<div>
<p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
</div>
管道链
<div>
<p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->
</div>
自定义管道
定义好的管道要在根模块中 declarations 声明。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'range'})
export class RangePipe implements PipeTransform {
transform(value: Array<any>, range: Number): Array<Number> {
for(var i = 0; i < range; i++){
value.push(i);
}
return value;
}
}
<p *ngFor="let key of [] | range: 10">{{key}}</p>