Angular-05:管道

• [① 介绍](#① 介绍)
• • [1.1 基本用法](#1.1 基本用法)
  • [1.2 管道参数](#1.2 管道参数)
  • [1.3 链式管道](#1.3 链式管道)
  • [1.4 纯管道](#1.4 纯管道)
  • [1.5 非纯管道](#1.5 非纯管道)
• [② 内置管道](#② 内置管道)
• ③自定义管道

① 介绍

1. 管道：pipe 。在angular中处理组件模板的数据格式。
2. 管道操作符 | ，连接模板表达式中左边输入数据和右边的管道。

1.1 基本用法

例：这里使用了内置管道 date 对日期的显示做了美化

<P>my birthday is {{birthday}}</P>   <!-- my birthday is Mon Feb 01 1993 00:00:00 GMT+0800 (中国标准时间) -->
<p>my birthday is {{ birthday | date }}</p>   <!-- my birthday is Feb 1, 1993 -->

birthday = new Date(1993,1,1);

1.2 管道参数

<P>my birthday is {{birthday | date:"y-MM-dd EEEE"}}</P>  <!-- my birthday is 1993-02-01 Monday -->
<P>my birthday is {{birthday | date:"y/MM/dd EEEE"}}</P>  <!-- my birthday is 1993/02/01 Monday -->

birthday = new Date(1993,1,1);

1.3 链式管道

一个模板表达式中可以连续使用多个管道进行不同的处理。

<P>my birthday is {{birthday | pipeName1 | pipeName2 | pipeName3}}</P>

模板表达式的值"birthday"，通过管道pipeName1处理后在传递给pipeName2处理，一直到最后一个管道处理完毕，就输出链式管道处理的最终结果。

1.4 纯管道

1. angular管道有两种变化检测机制，分别对应两种类型：纯管道和非纯管道。
2. 默认为纯管道。
3. 只有在检测到输入值发生纯变更时才会调用纯管道的transform() 方法来实现数据转换，在将数据更新到页面上。
4. 纯变更：基本数据类型输入值的变更或对象引用的更改。（对象的引用检测方式比遍历对象内部所有属性值要快的多，angular使用的是对象引用的监测策略）

1.5 非纯管道

1. angular管道有两种变化检测机制，分别对应两种类型：纯管道和非纯管道。
2. 使用非纯管道，angular组件在每个变化监测周期都会调用非纯管道，并执行管道的transform() 方法来更新页面数据。
3. 通过在管道元数据里将pure属性值设置为false来定义非纯管道

@Pipe({
  name: 'test-pipe',
  pure: false
})

---

② 内置管道

内置管道列举

序号	管道名	类型	说明
1	Date	纯管道	日期管道，格式化日期
2	Json	非纯管道	将输入数据对象经过JSON.stringify()方法转换后输出对象字符串
3	UpperCase	纯管道	将文本所有小写字母转成大写字母
4	LowerCase	纯管道	将文本所有大写字母转成小写字母
5	Decimal	纯管道	数值处理
6	Currency	纯管道	数值转成货币格式
7	Percent	纯管道	数值转成百分比格式
8	Slice	非纯管道	数组或字符串裁剪

---

③自定义管道

需求:

1. 指定字符串不能超过规定长度，文字的长度超过规定的长度会被裁剪，并且显示...（省略号）
2. 规定长度由管道参数决定
3. substr() 语法: string.substr(start,length)。指定的是字符串的开始位置和长度

举例：

1. 在页面上使用指令限制最多显示5个字，多余的截断并显示省略号。

定义管道：clipString

@Pipe({
  name: 'clipString'
})
export class ClipStringPipe implements PipeTransform {

  transform(value: string, limit: number): any {
    if (!value) return null;

    if (value.length > limit) {
      return value.substr(0, limit) + "...";
    }

  }

}

组件模板中的应用

<p>{{'今天是星期六呢' | clipString:6}}</p>

需要在declarations中声明

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ClipStringPipe
  ],
  exports: [SonComponent]
})
export class SonModule { }