```
管道對數據進行轉化,給出期望的輸出(類似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`使用接口中的可索引的類型進行定義。
- 目錄結構
- 架構
- 指令
- 數據綁定
- 結構性指令
- 屬性型指令
- 自定義指令
- 模板引用變量
- 屬性綁定
- 事件綁定
- 組件
- 組件交互
- 管道
- 自定義管道
- 動態組件
- 變量檢測機制
- 組件生命周期
- 路由
- 路由配置
- 路由導航
- 路由傳值
- 父子路由
- 路由事件
- 頂級路由和特征路由
- 多重路由
- 路由守衛
- 路由守衛-簡單理解
- 路由惰性加載
- 路由預加載
- 路由動畫
- 網絡請求
- GET請求
- POST請求
- JSOP請求
- 封裝的http請求
- http攔截器
- 表單
- 響應式表單
- 驅動式表單
- CLI命令
- 啟動應用
- 創建項目
- 創建組件
- 創建服務
- 創建路由守衛
- 創建特征模塊
- 創建自定義指令
- 創建自定義管道
- 相關概念
- 急性加載
- 惰性加載
- 特征模塊
- 常見問題
- 全局的Angular CLI大于本地的Angular CLI
- 包體優化