``` 管道对数据进行转化，给出期望的输出（类似TP5中模板使用函数） ``` ## 一、使用管道格式化数据 ``` import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<p>这个格式化后的日期: {{ dateTime | date }}</p>` }) export class AppComponent{ dateTime = new Date(1988, 3, 15); // April 15, 1988 } ``` ## 二、使用参数 ``` import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<p>使用参数格式化日期： {{ dateTime | date:"yyy/MM/dd" }}</p>` }) export class AppComponent{ dateTime = new Date(1988, 3, 15); // April 15, 1988 } ``` ## 三、链式管道（使用多个管道） ``` import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>使用多个管道格式化日期：{{ date | date:'fullDate' | uppercase}}</h1>` }) export class AppComponent{ dateTime = new Date(1988, 3, 15); // April 15, 1988 } ``` ## 四、内置管道 * Date：格式化日期 * UpperCase：转化为大写 * LowerCase：转化为小写 * Currency：把数字转换成金额字符串，具体参数配置查看[API手册 ](https://angular.cn/api/common/CurrencyPipe) * Percent：把数字转换成百分比字符串，具体参数配置查看[API手册](https://angular.cn/api/common/PercentPipe) * Json：把一个值转换成 JSON 字符串格式。在调试时很有用。 * 等等，具体查看[API参考手册](https://angular.cn/api?type=pipe) ## 五、管道之数据映射 管道的用处非常大，就我个人而言，时间转换及数据映射比较常见。我主要想讨论一下数据映射的问题。起初打算自己写关于数据映射的管道，但是想了想，难道不同的数据映射都单独写一个管道？然后我就想有没有自带的管道实现数据映射，仔细翻了翻文档，最后终于找到了，`I18nPluralPipe`就是用于映射数据的。我们用一个最常见的数据映射例子说明，比如保存性别数据时，1 表示男，2 表示女。 ~~~ @Component({ selector: 'i18n-plural-pipe', template: `<div>{{ sex | i18nPlural: sexMapping }}</div>` }) export class I18nPluralPipeComponent { sex: string = '1'; sexMapping: {[k: string]: string} = {'=1': '男', '=2': '女', 'other': '其他'}; } ~~~ `I18nPluralPipe`使用了[ICU 格式](http://userguide.icu-project.org/formatparse/messages)，确实长见识了。这个管道真的很好用，至少不用对每一个数据映射都写一个专用管道了。 上方示例代码中，`sexMapping`使用接口中的可索引的类型进行定义。