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 { }
Power Booster Super power boost: {{2 | exponentialStrength: 10}}

管道鏈

• <p>The chained hero's birthday is {{ ( birthday | date:'fullDate' ) | uppercase}}</p>當管道須要參數的時候，注意使用括號使得順序看得更清楚。