Angular2之管道學習筆記

管道。可以把一個輸出流與另一個輸入流連接起來。類似 linux、gulp都有應用。

在Angular2中使用管道非常方便。Angular2中本身提供了一些內置管道。當然也可以自定義管道。

文檔鏈接：https://angular.cn/docs/ts/latest/api/#!?apiFilter=pipe&query=pipe

日常開發中，內置管道也足夠用了。常用的有以下幾個：

1.字符串、數組截取

官方demo:

@Component({
  selector: 'slice-string-pipe',
  template: `<div>
    <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>　　　　// 截取第0個字符到第4個字符，即前四個字符　
    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>　　　　　// 截取字符串最后四個字符
    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>　　　//從字符串倒數第四個字符開始截取，直至倒數第二個字符
  </div>`
})
export class SlicePipeStringComponent {
  str: string = 'abcdefghij';
}

2.大小寫轉換

官方demo:

@Component({
  selector: 'lowerupper-pipe',
  template: `<div>
    <label>Name: </label><input #name (keyup)="change(name.value)" type="text">
    <p>In lowercase: <pre>'{{value | lowercase}}'</pre>　　　　　　　　//將value轉換成小寫
    <p>In uppercase: <pre>'{{value | uppercase}}'</pre>　　　　　　　　//將value轉換成大寫
  </div>`
})
export class LowerUpperPipeComponent {
  value: string;
  change(value: string) { this.value = value; }
}

3.日期轉換

官方demo:

@Component({
  selector: 'date-pipe',
  template: `<div>
    <p>Today is {{today | date}}</p>
    <p>Or if you prefer, {{today | date:'fullDate'}}</p>
    <p>The time is {{today | date:'jmZ'}}</p>
  </div>`
})
export class DatePipeComponent {
  today: number = Date.now();
}

用法：{{ today | date[:format] }}

today可以是日期對象、時間戳（毫秒）、ISO字符串，適用范圍還是挺廣泛的。

[:format] 范圍也特別廣，常見的寫法如下：

{{ today | date:"y-MM-dd"}}　　//2017-03-14

{{ today | date:"mmss"}}　　//11:35

{{ today | date:"y年MM月dd日HH時mm分ss秒"}}　　//2017年03月14日11時37分12秒

還有顯示日期的格式組合，包括數字、英文、時區等。可以參考官方文檔：

https://angular.cn/docs/ts/latest/api/common/index/DatePipe-pipe.html

4.對象轉換json

官方demo:

@Component({
  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <pre>{{object}}</pre>
    <p>With JSON pipe:</p>
    <pre>{{object | json}}</pre>
  </div>`
})
export class JsonPipeComponent {
  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}

5.格式化數字

日常開發中，有時候需要保留小數點后兩位，有時候需要取整。可以用這個管道

注：除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有瀏覽器都不支持，需要支持的話需要導入intl(https://github.com/andyearnshaw/Intl.js)

官方demo:

@Component({
  selector: 'number-pipe',
  template: `<div>
    <p>e (no formatting): {{e}}</p>
    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>　　　　//整數最小有3位。小數最小有一位，最多有5位 
    <p>pi (no formatting): {{pi}}</p>
    <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>　　　//整數最小3位，小數只能有5位
  </div>`
})
export class NumberPipeComponent {
  pi: number = 3.141592;
  e: number = 2.718281828459045;
}

用法： number | number[:digitInfo]

digitInfo是一個string具有以下格式：
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits是要使用的最小整數位數。默認為1。
• minFractionDigits是分數后的最小位數。默認為0。
• maxFractionDigits是分數后的最大位數。默認為3。

 <p>{{number | number:'1.2-2'}}</p>   // 將數字變成兩位小數

6.數字格式化為百分數

<p>{{number | percent:'1.2-2'}}</p>   // 將數字變成百分數兩位小數  20.84%

用法和第五點 格式化數字 一樣，就是顯示結果后面多了一個百分號%

7.數字格式化為貨幣

用法：number | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

demo:

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>A: {{a | currency:'USD':false}}</p>
    <p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  a: number = 0.259;
  b: number = 1.3495;
}

個人感覺最大的弊端就是 這個貨幣符號/代碼 不能單獨調樣式。 

8.I18nSelect

I18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數）是“國際化”的簡稱。

工作太忙，有空再把剩下的內容補上