Angular2 Pipe（管道）

使用方法

• 在angular1的版本中有“过滤器-filter”的概念，在angular2的版本中换成了pipe（管道），写法也比较简单，功能和filter一样，都是在页面上对参数进行状态转换
• Angular2中管道的作用：在模板中对输入数据进行变换，并输出变换后的结果。
• 在模板中，使用|符号来调用一个管道操作，使用:来向管道传入参数。{{ data | <pipename>:<arg1>:<arg2> }}

管道的类型

• 主要存在两种类型的管道，pure pipe(无状态管道)和impure pipe(有状态管道)
• 我们将pure标志赋值为false，可以声明管道为impure类型。我们将pure标志赋值为false，可以声明管道为impure类型。

  @Pipe({
  
  name: 'flyingHeroes',
  
  pure: false
  
  })

• 无状态管道，当输入没有变化时，Angular2框架不会重新计算管道的输出。
• 有状态管道，Angular2框架在每个变化检查周期都执行 管道的transform()方法。
  使用管道，实现一个倒数计时器

    @pipe({
        name:"countdown",
        pure : false
    })
    class EzCountdown{
    	transform(input){
    	this.initOnce(input);
        return this.counter;
    }
    initOnce(input){
    	if(this.initialized) return;
        this.initialized = true;
    	var self =this;
        self.counter = input;
        self.timer = setInterval(_ => {
            self.counter--;
            if(self.counter===0) 
            	clearInterval(self.timer);
        },1000);
   	 }
    }

• 管道的有状态与无状态的区别，关键在于是否需要Angular2框架在输入不变的 情况下依然持续地进行变化检测，而不在于我们通常所指的计算的幂等性 - 即同样的输入 总是产生同样的输出。
• angular2的管道还可以分为：①已有内建管道 ②自定义管道
• 一个计算累加值的管道，在传统的概念中，应当被视为有状态的，因为它对于同样的输 入，会累加之前记录的总和，因此会产生不同的输出。但是，在Angular2中，它依然被视为无 状态的，因为，它的一次输入不会产生多次输出。

内建管道

• Angular2提供了很多内建的管道函数，例如：DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe、PercentPipe等。
• 管道函数可以接收任意数量的参数
• 在管道名称的后面添加冒号（:）和参数值，例如currency:'EUR'。如果是多个参数，参数值之间也用冒号隔开，例如slice:1:5。
• 例如:April, 15, 1988显示成04/15/88：
  <p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>，
  这里的date为内建管道DatePipe的名字，"MM/dd/yy"为传入的参数

自定义管道

• pipe是一个类，使用@Pipe装饰器提供元数据。
• @Pipe装饰器接收的对象有name属性，它的值就是我们在模板表达式中使用的管道的名称
• pipe类实现PipeTransform接口的transform方法。该方法接收一个输入值和一个可选的参数数组，返回转换后的值。

//app/exponential-strength.pipe.ts
import {Pipe, PipeTransform} from 'angular2/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value:number, [exponent]) : number {
var exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}


自定义管道的使用

使用方式跟内建管道一样。但是我们要在组件的@Component的pipes数组中列出我们的自定义管道。

@Component({
  selector: 'power-booster',
  template: `
    Power Booster
    Super power boost: {{2 | exponentialStrength: 10}}
    `
  ,
  pipes: [ExponentialStrengthPipe]
})
export class PowerBooster { }

管道链

• <p>The chained hero's birthday is {{ ( birthday | date:'fullDate' ) | uppercase}}</p>当管道需要参数的时候，注意使用括号使得顺序看得更清楚。