1. 说明
管道用来转换模板显示的内容，应用程序中经常出现获取数据，转换数据，显示数据的逻辑。管道就是用来在转换数据阶段起作用的。主要存在两种类型的管道，pure pipe和impure pipe
2. Pure Pipe
Pure 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 Pipe
Impure Pipe，stateful，Angular 会在每个组件的变更检测周期中执行 非纯管道 。 非纯管道可能会被调用很多次，和每个按键或每次鼠标移动一样频繁。常见的内置非纯管道有
|
名称 |
用法 |
说明 |
|
AsyncPipe |
object | async |
接受一个 Promise 或 Observable 作为输入，并且自动订阅这个输入，最终返回它们给出的值 |
4. 如何使用
管道把数据作为输入，然后转换它，给出期望的输出。管道使用包括三个方面：
(1). 表达式语法的写法
(2). 如何参数设置
(3). 多个管道如何同时使用
从下面的例子可以很方便的看出来以上三个方面如何编写，
|
import { Component } from '@angular/core';
@Component({ moduleId: 'app', selector: 'app', template: ` <h5>your birthday is {{birthday | date:'MM/dd/yy' | uppercase}}</h5> `, }) 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的方法，在数据转化过程中会自动调用这个方法，并将结果返回。我们实现截取的管道类代码如下
|
export class SubPipe implements PipeTransform { transform(value: string, length: number): string { return value.substring(0, length); } } |
最后实现的代码如下：
|
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); } } |