AngularJS 4(五)【管道】

管道

用来转换数据渲染的格式，在 1.x 版本的时候称之为过滤器，在 4.x 称之为管道。

使用

格式：date_expression | date[:format[:timezone[:locale]]]

大写转换

<div><p ngNonBindable>{{ 'Angular' | uppercase }}p><p>{{ 'Angular' | uppercase }}p> 
div>

小写转换

<div><p ngNonBindable>{{ 'Angular' | lowercase }}p><p>{{ 'Angular' | lowercase }}p> 
div>

JavaScript 对象序列化

<div><p ngNonBindable>{{ { name: 'semlinker' } | json }}p><p>{{ { name: 'semlinker' } | json }}p> 
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> 
div>

日期格式化

@Component({selector: 'date-pipe',template: `<p>Today is {{today | date}}p><p>Or if you prefer, {{today | date:'fullDate'}}p><p>The time is {{today | date:'shortTime'}}p><p>The custom date is {{today | date:'yyyy-mm-dd HH:mm a z':'+0900'}}p><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> 
div>

管道链

<div><p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}p><p>{{ 'semlinker' | slice:0:3 | uppercase }}p> 
div>

自定义管道

定义好的管道要在根模块中 declarations 声明。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'range'})
export class RangePipe implements PipeTransform {transform(value: Array, 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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！