管道用来转换模板显示的内容,应用程序中经常出现获取数据,转换数据,显示数据的逻辑。管道就是用来在转换数据阶段起作用的。主要存在两种类型的管道,pure pipe和impure pipe
2. Pure PipePure Pipe,stateless,关注于纯粹对象的变更,检测到输入值发生了纯变更时才会执行纯管道。纯变更是指对原始类型值 (String、Number、Boolean、Symbol) 的更改, 或者对对象引用 (Date、Array、Function、Object) 的更改。针对复杂对象内部元素的变更不会影响到纯粹管道的执行。常见的内置管道
名称
用法
说明
CurrencyPipe
expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
将数据转化为指定格式的金额格式输出
DatePipe
expression | date[:format]
将时间数据转换为指定格式的字符串
DecimalPipe
expression | number[:digitInfo]
将数据转化为指定格式的数据格式输出
LowerCasePipe
expression | lowercase
将数据转化为小写输出
UpperCasePipe
expression | uppercase
将数据转化为大写输出
JsonPipe
expression | json
将数据转化为json格式输出
SlicePipe
expression | slice:start[:end]
获取指定位置从start到end的数据
3. Impure PipeImpure Pipe,stateful,Angular 会在每个组件的变更检测周期中执行非纯管道。 非纯管道可能会被调用很多次,和每个按键或每次鼠标移动一样频繁。常见的内置非纯管道有
名称
用法
说明
AsyncPipe
object | async
接受一个 Promise 或 Observable 作为输入,并且自动订阅这个输入,最终返回它们给出的值
4. 如何使用管道把数据作为输入,然后转换它,给出期望的输出。管道使用包括三个方面:
(1). 表达式语法的写法
(2). 如何参数设置
(3). 多个管道如何同时使用
从下面的例子可以很方便的看出来以上三个方面如何编写,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import
{ Component } from
'@angular/core'
;
@Component
({
moduleId:
'app'
,
selector:
'app'
,
template: `
your birthday is {{birthday | date:
'MM/dd/yy'
| uppercase}}
`,
})
export
class
AppComponent {
birthday: Date =
new
Date(
2012
,
10
,
10
);
}
|
表达式的写法:在插值表达式中数据的右侧通过管道操作符( | ) 及 右侧的管道函数 来表示
如何设置参数:在管道函数的后面添加一个冒号 ( : ) 再跟一个参数值,来为管道添加参数
多个管道同时使用:在插值表达式数据后面可以同时采用多个管道操作符( | ) 及 右侧的管道函数来表示多个管道,执行顺位为从左到右依次执行。
5. 自定义管道我们来编写一个自定义管道,管道的含义是截取指定长度的字符串。
5.1 模块首先我们引入对应的模块及函数Pipe
import { Pipe, PipeTransform } from '@angular/core';
5.2 注解从@angular/core中导入Pipe及PipeTransform函数后,可以使用@ Pipe ()来标示组件类为一个Pipe,@标示注解的一种标识,用来普通类附加对应的元数据信息。
5.3 元数据@Pipe将元数据的信息附加到类上,我们来了解一下常用的元数据信息都有哪些:
@Directive({
name: 'sub',
pure: false
})
name:管道的名称,表示在使用管道所采用的名称,例如 date等,
pure:布尔值,纯管道或者非纯管道
5.4 管道类管道类包含实现数据转化的主要逻辑,管道类必须实现PipeTransform的transform的方法,在数据转化过程中会自动调用这个方法,并将结果返回。我们实现截取的管道类代码如下
1
2
3
4
5
6
7
8
9
|
export
class
SubPipe
implements
PipeTransform {
transform(value: string, length: number): string {
return
value.substring(
0
, length);
}
}
|
最后实现的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import
{ Pipe, PipeTransform } from
'@angular/core'
;
@Pipe
({
name:
'sub'
,
pure:
false
})
export
class
SubPipe
implements
PipeTransform {
transform(value: string, length: number): string {
return
value.substring(
0
, length);
}
}
|