管道就是将输入的数据->通过某种转换->输出期望的值。
最常见的就是把服务端下发的时间戳转化成前端需要的时间字符串。
比如服务器下发的时间是1507519139，
而我们需要展示的时间是2017/10/9 11:18:59，
或者2017-10-9 11:18:59类似这样子的字符串，
就可以使用管道。
内置管道
Angular中提供了一部分常见的内置管道。
DatePipe时间管道
这个还是挺常用的，需要记下来的是。
年y 月M 日d 时H 分m 秒s
这里是区分大小写的。
比如我们需要的2017/10/9 11:18:59这样的字符格式
就可以这样定义timestamp|date:'yyyy/MM/dd HH:mm:ss'
DatePipe还提供了一些默认的参数，如'short'、'medium'、'long'等，我觉得记下来太麻烦了，我建议不管他，需要什么格式，自己写一下就好，保证不出错。
I18nPluralPipe和I18nSelectPipe I18n复数管道和I18n选择管道
这两者的功能差不多，一个是比较，一个是选择。
I18nPluralPipe 过滤的参数是一个数值，然后选择根据条件转化。
@Component({ selector: 'i18n-plural-pipe', template: `<div>{{ messages.length | i18nPlural: messageMapping }}</div>` }) export class I18nPluralPipeComponent { messages: any[] = ['Message 1']; messageMapping: {[k: string]: string} = {'=0': 'No messages.', '=1': 'One message.', 'other': '# messages.'}; }
从上面的例子中可以看出messages.length | i18nPlural: messageMapping中的messages.length是一个数值。messageMapping定义了三个条件。
I18nSelectPipe 则是一个简单的匹配。
@Component( {selector: 'i18n-select-pipe', template: `<div>{{gender | i18nSelect: inviteMap}} </div>`}) export class I18nSelectPipeComponent { gender: string = 'male'; inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'}; }
gender | i18nSelect: inviteMap中的gender是一个字符串，inviteMap定义了一个过滤的数据。
这两者都相同的是other为保留字段，用于处理条件都不成立的情况。
JsonPipe Json管道
将Json对象转化成Json字符串输出。
DecimalPipe十进制管道
最常见的是保留小数点后面多少位。
price|number:'4.2-2'
后面的形如'4.2-2'这样的a.b-c的结构。
a表示小数点之前最少显示几位。如2|number:'2'则会输出’02’
b表示小数点之后最少显示几位。如2|number:'2.2'则输出’02.20’
c表示小数点之后最多显示几位。如3.1415926|number:'2.2-3'则输出’03.141’
CurrencyPipe货币管道
有用到的地方就是在货币前面加一个符号如要加一个’CN¥’或者’$’
currency:'RMB':'symbol-narrow':'4.2-2'
第二个参数，人民币有两个可选，’RMB’和’CNY’。
注意：CNY对应的符号是’CN¥’，如果只想在货币前面加’¥’,
可通过简单的自定义管道实现，方法下一节课中讲解。
第三个参数接受'symbol-narrow'显示符号和'symbol'显示字母。
可以直接用true和false代替，注意使用true和false时是boolean值，不带引号。
第四个参数和十进制管道DecimalPipe的参数一样。
PercentPipe百分比管道
将小数转化成百分比，如0.2->20%
b | percent:'4.3-5'后面一个参数和十进制管道DecimalPipe的参数一样。
LowerCasePipe和UpperCasePipe小写管道和大写管道
就是讲字符串字母全变成小写或者大写
最后我们来看一个比较有趣的管道。
SlicePipe截取管道
和js操作数组中的slice方法类似。
比如数据太多，只想显示前三项或者后三项，或者中间指定的某三项。
array_or_string_expression | slice:start[:end]
语法还蛮简单的，指定开始和可选的结束。
有趣的是，这里的角标支持负数。
@Component({ selector: 'slice-string-pipe', template: `<div> <p>'{{str | slice:0:4}}' - 截取0-4，最终输出 'abcd'</p> <p>'{{str | slice:4:0}}' - 最终输出 ''</p> <p>'{{str | slice:-4}}' - 从倒数第四开始截取，最终输出 'ghij'</p> <p>'{{str | slice:-4:-2}}' - 从倒数第四道倒数第二，最终输出 'gh'</p> <p>'{{str | slice:-100}}' - 从倒数100位开始，最终输出 'abcdefghij'</p> <p>'{{str | slice:100}}' - 从100位开始，最终输出 ''</p> </div>` }) export class SlicePipeStringComponent { str: string = 'abcdefghij'; }
这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫，希望你开心。
