``` 管道對數據進行轉化，給出期望的輸出（類似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`使用接口中的可索引的類型進行定義。