Angular-05:管道

① 介绍

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

1.1 基本用法

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

<P>my birthday is {{birthday}}P>   
<p>my birthday is {{ birthday | date }}p>   
1
2

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

1.2 管道参数

<P>my birthday is {{birthday | date:"y-MM-dd EEEE"}}P>  
<P>my birthday is {{birthday | date:"y/MM/dd EEEE"}}P>  
1
2

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

1.3 链式管道

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

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

模板表达式的值“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
2
3
4

---

② 内置管道

内置管道列举

---

③自定义管道

需求:

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) + "...";
    }

  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

组件模板中的应用

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

需要在declarations中声明

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

1
2
3
4
5
6
7
8
9
10
11