管道。可以把一个输出流与另一个输入流连接起来。类似 linux、gulp都有应用。
在Angular2中使用管道非常方便。Angular2中本身提供了一些内置管道。当然也可以自定义管道。
文档链接:https://angular.cn/docs/ts/latest/api/#!?apiFilter=pipe&query=pipe
日常开发中,内置管道也足够用了。常用的有以下几个:
1.字符串、数组截取
官方demo:
@Component({
selector: 'slice-string-pipe',
template: `<div>
<p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p> // 截取第0个字符到第4个字符,即前四个字符
<p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p> // 截取字符串最后四个字符
<p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p> //从字符串倒数第四个字符开始截取,直至倒数第二个字符
</div>`
})
export class SlicePipeStringComponent {
str: string = 'abcdefghij';
}
2.大小写转换
官方demo:
@Component({
selector: 'lowerupper-pipe',
template: `<div>
<label>Name: </label><input #name (keyup)="change(name.value)" type="text">
<p>In lowercase: <pre>'{{value | lowercase}}'</pre> //将value转换成小写
<p>In uppercase: <pre>'{{value | uppercase}}'</pre> //将value转换成大写
</div>`
})
export class LowerUpperPipeComponent {
value: string;
change(value: string) { this.value = value; }
}
3.日期转换
官方demo:
@Component({
selector: 'date-pipe',
template: `<div>
<p>Today is {{today | date}}</p>
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<p>The time is {{today | date:'jmZ'}}</p>
</div>`
})
export class DatePipeComponent {
today: number = Date.now();
}
用法:{{ today | date[:format] }}
today可以是日期对象、时间戳(毫秒)、ISO字符串,适用范围还是挺广泛的。
[:format] 范围也特别广,常见的写法如下:
{{ today | date:"y-MM-dd"}} //2017-03-14
{{ today | date:"mmss"}} //11:35
{{ today | date:"y年MM月dd日HH时mm分ss秒"}} //2017年03月14日11时37分12秒
还有显示日期的格式组合,包括数字、英文、时区等。可以参考官方文档:
https://angular.cn/docs/ts/latest/api/common/index/DatePipe-pipe.html
4.对象转换json
官方demo:
@Component({
selector: 'json-pipe',
template: `<div>
<p>Without JSON pipe:</p>
<pre>{{object}}</pre>
<p>With JSON pipe:</p>
<pre>{{object | json}}</pre>
</div>`
})
export class JsonPipeComponent {
object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}
5.格式化数字
日常开发中,有时候需要保留小数点后两位,有时候需要取整。可以用这个管道
注:除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有浏览器都不支持,需要支持的话需要导入intl(https://github.com/andyearnshaw/Intl.js)
官方demo:
@Component({
selector: 'number-pipe',
template: `<div>
<p>e (no formatting): {{e}}</p>
<p>e (3.1-5): {{e | number:'3.1-5'}}</p> //整数最小有3位。小数最小有一位,最多有5位
<p>pi (no formatting): {{pi}}</p>
<p>pi (3.5-5): {{pi | number:'3.5-5'}}</p> //整数最小3位,小数只能有5位
</div>`
})
export class NumberPipeComponent {
pi: number = 3.141592;
e: number = 2.718281828459045;
}
用法: number | number[:digitInfo]
digitInfo
是一个string
具有以下格式:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
-
minIntegerDigits
是要使用的最小整数位数。默认为1
。 -
minFractionDigits
是分数后的最小位数。默认为0
。 -
maxFractionDigits
是分数后的最大位数。默认为3
。
<p>{{number | number:'1.2-2'}}</p> // 将数字变成两位小数
6.数字格式化为百分数
<p>{{number | percent:'1.2-2'}}</p> // 将数字变成百分数两位小数 20.84%
用法和第五点 格式化数字 一样,就是显示结果后面多了一个百分号%
7.数字格式化为货币
用法:number | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
demo:
@Component({
selector: 'currency-pipe',
template: `<div>
<p>A: {{a | currency:'USD':false}}</p>
<p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
</div>`
})
export class CurrencyPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
个人感觉最大的弊端就是 这个货币符号/代码 不能单独调样式。
8.I18nSelect
I18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称。
工作太忙,有空再把剩下的内容补上