angular中的管道(pipe) 以及自定義管道

http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34
1. 大小寫轉換
 <p>{{str | uppercase}}</p>//轉換成大寫
<p>{{str | lowercase}}</p>//轉換成小寫

 2. 日期格式轉換
 
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p> 

 3. 小數位數
 //接收的參數格式爲{最少整數位數}.{最少小數位數}-{最多小數位數}
//保留2~4位小數 <p>{{p | number:'1.2-4'}}</p> 

 4. JavaScript 對象序列化
 <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->

 5. slice
 <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->


 6. 管道鏈
 
<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->


 7. 自定義管道
 自定義管道的步驟： 使用 @Pipe 裝飾器定義 Pipe 的 metadata 信息，如 Pipe 的名稱 - 即 name 屬性 實現 PipeTransform 接口中定義的 transform 方法 1.1 WelcomePipe 定義 
import { Pipe, PipeTransform } from '@angular/core';
[@Pipe](/user/Pipe)({ name: 'welcome' })
export class WelcomePipe implements PipeTransform {
  transform(value: string): string {
    if(!value) return value;
    if(typeof value !== 'string') {
      throw new Error('Invalid pipe argument for WelcomePipe');
    }
    return "Welcome to " + value;
  }
} 
1.2 WelcomePipe 使用 <div>
   <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
   <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>
2.1 RepeatPipe 定義 import {Pipe, PipeTransform} from '@angular/core';
[@Pipe](/user/Pipe)({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
    transform(value: any, times: number) {
        return value.repeat(times);
    }
}

2.2 RepeatPipe 使用 <div>
   <p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
   <p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
</div>