管道

Angular核心概念之五：管道（Pipe）

管道是简单的函数，在模板表达式中使用，接受一个输入值并返回一个转换后的值。管道很有用，因为你可以在整个应用程序中使用它们，只需声明每个管道一次。例如，你可以使用管道将日期显示为 1988年4月15日，而不是原始的字符串格式。
在Angular2之前，管道叫做过滤器
Filter过滤器，用于在View中呈现数据时显示为另一种格式；过滤器的本质是一个函数，接收原始数据转换为新的格式进行输出

typescript

function(oldVal) {
  ...
  return newVal;
}

使用过滤器

typescript

{{e.salary | 过滤器名}}

内置管道

lowercase
把文本转换成全小写形式。
输入值类型string
typescript
```
{{ value_expression | lowercase }}
```
uppercase
把文本转换成全大写形式。
输入值类型string
typescript
```
{{ value_expression | uppercase }}
```
titlecase
把文本转换成标题形式。把每个单词的第一个字母转成大写形式，并把单词的其余部分转成小写形式。单词之间用任意空白字符进行分隔，比如空格、Tab 或换行符。
输入值类型string
typescript
```
{{ value_expression | titlecase }}
```
slice
从一个 Array 或 String 中创建其元素一个新子集（slice）。只显示字符串的一部分
当操作空白值时，该管道也会返回空白值。
当操作 Array 时，返回的 Array 始终是一个副本 —— 即使返回了所有元素也是一样。
输入值类型string | readonly T[]
typescript
```
{{ value_expression | slice : start [ : end ] }}
```
json
把一个值转换成 JSON 字符串格式。在调试时很有用。
输入值类型any
typescript
```
{{ value_expression | json }}
```
number
根据数字选项和区域设置规则格式化值。区域设置确定组的大小和分隔符、小数点字符和其他特定于区域设置的配置。
输入值类型string | number
typescript
```
{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
```
参数名类型说明
digitsInfo string 可选值。默认值为 undefined
locale string 可选值。默认值为 undefined
- digitsInfo
  值的十进制表示由 digitsInfo 参数指定，格式如下：
  typescript
```
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
```
  - minIntegerDigits
    小数点前的最小整数位数。默认值为 1。
  - minFractionDigits
    小数点后的最小位数。默认值为 0。
  - maxFractionDigits
    小数点后的最大位数。默认值为 3。
  如果格式化的值被截断，将使用“to-nearest”方法将其四舍五入：
  typescript
```
{{3.6 | number: '1.0-0'}}


{{-3.6 | number:'1.0-0'}}

```
- locale
  locale 将根据区域设置规则格式化值。区域设置确定组的大小和分隔符、小数点字符和其他特定于区域设置的配置。
  未提供时，使用 LOCALE_ID 的值，默认为 en-US。

参数名	类型	说明
digitsInfo	string	可选值。默认值为 undefined
locale	string	可选值。默认值为 undefined

currency
将数字转换为货币字符串，根据确定组大小和分隔符、小数点字符和其他特定于区域设置的配置的区域设置规则进行格式化。
输入值类型string | number

typescript

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

参数名	类型	说明
currencyCode	string	可选值。默认值为 this._defaultCurrencyCode。
display	string or boolean	货币指示器的格式。可选值。默认值为 'symbol'。
digitsInfo	string	十进制表示选项。可选值。默认值为 undefined。
locale	string	可选值。默认值为 undefined。

display
货币指示器的格式。以下之一：
- code
  显示代码（例如 USD）。
- symbol（默认）
  显示符号（例如 $）。
- symbol-narrow
  对有两个货币符号的区域设置使用窄符号。例如，加元 CAD 的符号是 CA$ 和符号-narrow $。如果此区域设置没有窄符号，则使用此区域设置的标准符号。
- 字符串
  使用给定的字符串值，而不是代码或符号。例如，空字符串将抑制货币 & 符号。
- 布尔值（在 v5 中标记为已弃用）
  symbol 为 true，code 为 false。
digitsInfo
十进制表示选项，由以下格式的字符串指定：
- minIntegerDigits
  小数点前的最小整数位数。默认为 1。
- minFractionDigits
  小数点后的最小位数。默认为 2。
- maxFractionDigits
  小数点后的最大位数。默认为 2。如果未提供，则该数字将根据ISO 4217指定的内容使用适当的位数格式化。例如，加元有 2 位，而智利比索没有。

date
根据区域设置规则格式化日期值。
输入值类型string | number | Date

typescript

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

参数名	类型	说明
format	string	可选值。默认值为 undefined。
timezone	string	可选值。默认值为 undefined。
locale	string	可选值。默认值为 undefined。

DatePipe 仅当检测到输入值发生纯粹更改时才会执行。纯更改是对原始输入值的更改（例如 String、Number、Boolean 或 Symbol），或者是更改的对象引用（例如 Date、Array、Function 或 Object）。

请注意，更改 Date 对象不会导致管道再次渲染。为确保管道被执行，你必须创建一个新的 Date 对象。

Angular 只自带了 en-US 区域的数据。要想在其它语言中对日期进行本地化，你必须导入相应的区域数据。欲知详情，参见 I18n guide。

可以通过将格式化值的时区作为管道的第二个参数传入，或通过 DATE_PIPE_DEFAULT_TIMEZONE 注入令牌设置默认值来指定格式化值的时区。作为第二个参数传入的值优先于使用注入令牌定义的值。
当输入值发生变化时，该管道的结果并不会改变。如果不想在每个变更检测周期中都强制重新格式化该日期，请把日期看做一个不可变对象，当需要让该管道重新运行时，请赋给它一个新的对象，以更改它的引用。

预定义的格式选项

选项	等效于	示例（用 en-US语言环境提供）
'short'	'M/d/yy, h:mm a'	6/15/15, 9:03 AM
'medium'	'MMM d, y, h:mm:ss a'	Jun 15, 2015, 9:03:01 AM
'long'	'MMMM d, y, h:mm:ss a z'	June 15, 2015 at 9:03:01 AM GMT+1
'full'	'EEEE, MMMM d, y, h:mm:ss a zzzz'	Monday, June 15, 2015 at 9:03:01 AM GMT+01:00
'shortDate'	'M/d/yy'	6/15/15
'mediumDate'	'MMM d, y'	Jun 15, 2015
'longDate'	'MMMM d, y'	June 15, 2015
'fullDate'	'EEEE, MMMM d, y'	Monday, June 15, 2015
'shortTime'	'h:mm a'	9:03 AM
'mediumTime'	'h:mm:ss a'	9:03:01 AM
'longTime'	'h:mm:ss a z'	9:03:01 AM GMT+1
'fullTime'	'h:mm:ss a zzzz'	9:03:01 AM GMT+01:00

自定义格式选项
你可以用符号构造格式字符串来指定日期时间值的组成部分，如下表所述。格式详细信息取决于区域设置。标有 (*) 的字段仅在给定区域设置的额外数据集中可用。

字段类型	格式	说明	示例值
时代	G、GG和GGG	缩写	AD
	GGGG	宽	公元
	GGGGG	窄	A
年份	y	数字: 最小位数	2, 20, 201, 2017, 20173
	yy	数字: 2位数 + 补零	02, 20, 01, 17, 73
	yyy	数字: 3位数 + 补零	002, 020, 201, 2017, 20173
	yyyy	数字: 4位数或更多 + 补零	0002, 0020, 0201, 2017, 20173
ISO周编号年份	Y	数字: 最小位数	2, 20, 201, 2017, 20173
	YY	数字: 2位数 + 补零	02, 20, 01, 17, 73
	YYY	数字: 3位数 + 补零	002, 020, 201, 2017, 20173
	YYYY	数字: 4位数或更多 + 补零	0002, 0020, 0201, 2017, 20173
月份	M	数字: 1位数	9, 12
	MM	数字: 2位数 + 补零	09, 12
	MMM	缩写	九月
	MMMM	宽	九月
	MMMMM	窄	S
月份独立显示	L	数字: 1位数	9, 12
	LL	数字: 2位数 + 补零	09, 12
	LLL	缩写	九月
	LLLL	宽	九月
	LLLLL	窄	S
ISO年份的周数	w	数字: 最小位数	1... 53
	ww	数字: 2位数 + 补零	01... 53
月份的周数	W	数字: 1位数	1... 5
日期	d	数字: 最小位数	1
	dd	数字: 2位数 + 补零	01
星期	E, EE & EEE	缩写	周二
	EEEE	宽	星期二
	EEEEE	窄	T
	EEEEEE	简短	周二
独立星期	c, cc	数字: 1位数	2
	ccc	缩写	周二
	cccc	宽	星期二
	ccccc	窄	T
	cccccc	简短	周二
时段	a, aa & aaa	缩写	上午/下午或AM/PM
	aaaa	宽（当缺失时回退到a)	上午/下午
	aaaaa	窄	上午/下午
时段*	B, BB & BBB	缩写	中午
	BBBB	宽	上午、下午、午夜、正午、早晨、下午、傍晚、晚上
	BBBBB	窄	md
时段独立*	b，bb 和 bbb 缩写中午
	bbbb	宽	上午、下午、午夜、正午、早晨、下午、傍晚、晚上
	bbbbb	窄	md
小时 1-12	h	数字: 最小位数	1, 12
	hh	数字: 2位数 + 补零	01, 12
小时 0-23	H	数字: 最小位数	0, 23
	HH	数字: 2位数 + 补零	00, 23
分钟	m	数字: 最小位数	8, 59
	mm	数字: 2位数 + 补零	08, 59
秒	s	数字: 最小位数	0... 59
	ss	数字: 2位数 + 补零	00... 59
小数秒	S	数字: 1位数	0... 9
	S	数字: 2位数 + 补零	00... 99
	SSS	数字：3 位数字 + 零填充（等同于毫秒）	000... 999
时区	z、zz 和 zzz	短特定非位置格式（回退到 O）	GMT-8
	zzzz	长特定非位置格式（回退到 OOOO）	GMT-08:00
	Z、ZZ 和 ZZZ	ISO8601 基本格式	-0800
	ZZZZ	长本地化 GMT 格式	GMT-8:00
	ZZZZZ	ISO8601 扩展格式 + Z 指示符表示偏移为 0（等同于 XXXXX）	-08:00
	O、OO 和 OOO	短本地化 GMT 格式	GMT-8
	OOOO	长本地化 GMT 格式	GMT-08:00

格式范例
下面这些例子会把日期转换成多种格式。这里假设 dateObj 是个 JavaScript 的 Date 对象：2015 年 6 月 15 日 21 时 43 分 11 秒，使用的是 en-US 区域的当地时间。

typescript

{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mm:ss' }}       // output is '43:11'
{{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }}  // output is 'Jun 15, 2015 at 09:43 PM'

自定义管道

创建管道class，实现转换功能

typescript

@Pipe({
 name: 'sex'
})
export class SexPipe{
 transform(oldVal) {
   return newVal;
 }
}

在模块中注册管道

在模板视图中使用管道

typescript

{{e.empSex | sex}}
<p [title]="empSex | sex"></p>
<p [title]="empSex | sex : param [: ...]"></p>

管道 ​

Angular核心概念之五：管道（Pipe） ​

内置管道 ​

自定义管道 ​

管道

Angular核心概念之五：管道（Pipe）

内置管道

自定义管道