Angular2.x 管道

1. 管道

管道能很好的封装和共享的通用“值-显示”转换逻辑。我们可以像样式一样使用它们，把它们扔到模板表达式中，以提升视图的表现力和可用性。

2. 内置管道(常用)

• DatePipe
  使用：date_expression | date[:format[:timezone[:locale]]]
  如：{{nowDate | date='fullDate'}}
  更多参数配置见：DatePipe
• JsonPipe
  使用： {{object | json}}
  说明：将值转换为json字符串，与JSON.stringify效果一样
• LowerCasePipe、UpperCasePipe
  使用：{{ string | lowercase(uppercase)}}
• TitleCasePipe
  使用： {{string | titlecase}}
  说明：字符串第一个字母大写
• SlicePipe
  使用： array_or_string_expression | [slice]):start[:end]
  如： {{ string | slice:0:3}}
  更多参数配置见：SlicePipe

3. 自定义管道

• 创建自定义管道bigPipe.pipe.ts

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'bigPipe'
})
export class BigPipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (value > 10) {
     return '大于10不显示';
    }
    return null;
  }
}

• 使用管道

1. 在组件所属模块declarations中导入

declarations: [
    AppComponent,
    BigPipePipe
],

2. 在模板中使用
   

   {{ 20 | bigPipe}}

   
   输出

   大于10不显示

• 注意：
  a. 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
  b. 实现 PipeTransform 接口中定义的 transforms 方法