一、管道使用場景

每個應用開始的時候差不多都是一些簡單任務：獲取資料、轉換它們，然後把它們顯示給使用者。通過引入Angular管道，我們可以把這種簡單的“顯示-值”轉換器宣告在HTML中。

二、內建管道

Angular內建了一些管道，比如DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。 它們全都可以直接用在任何模板中。
比如在如下程式碼中使用：

import { Component } from '@angular/core';

@Component({
  selector: 'hero-birthday',
  template: `<p
 
>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

<p>The hero's birthday is {{ birthday | date }}</p>

當然我們也可以傳遞引數到管道中：

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }}
 
 </p>

這樣我們便可以格式化我們的時間為指定的格式。
我們可以把管道鏈在一起，以組合出一些潛在的有用功能。

The chained hero's birthday is
{{ birthday | date | uppercase}}

三、自定義管道

在ioinic2的專案中我們可以使用命令

ionic g pipe myPipe

便可自動生成如下程式碼：

@Pipe({
  name: 'myPipe',
})
export class MyPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
 

  transform(value: string, ...args) {
    return value.toLowerCase();
  }
}

只要我們修改transform方法遍可自定義我們的管道，比如：

transform(str: string, ...args) {
     if (!str) return ''
  var date = new Date(str)
  var time = new Date().getTime() - date.getTime() // 現在的時間-傳入的時間 = 相差的時間（單位 = 毫秒）
  if (time < 0) {
    return ''
  } else if ((time / 1000 < 30)) {
    return '剛剛'
  } else if (time / 1000 < 60) {
    return parseInt((time / 1000)+'') + '秒前'
  } else if ((time / 60000) < 60) {
    return parseInt((time / 60000)+'') + '分鐘前'
  } else if ((time / 3600000) < 24) {
    return parseInt(time / 3600000+'') + '小時前'
  } else if ((time / 86400000) < 31) {
    return parseInt(time / 86400000+'') + '天前'
  } else if ((time / 2592000000) < 12) {
    return parseInt(time / 2592000000+'') + '月前'
  } else {
    return parseInt(time / 31536000000+'') + '年前'
  }
  }

在我們的ionic模組中只要

//xxx.module.ts
import { NgModule } from '@angular/core'
import { IonicPageModule } from 'ionic-angular'

import { AllRequestPage } from './all-request'
import { MyPipe} from '../../pipes/my/my'

@NgModule({
    declarations: [AllRequestPage, MyPipe],
    imports: [IonicPageModule.forChild(AllRequestPage)],
    exports: [AllRequestPage]
})
export class AllRequestPageModule { }


////xxx.html
<ion-content style='background:#DADADA'>
    <div class='container'>
        <div class="content" *ngFor='let item of items'>
            <div class="top-div">
                <div class='img' [style.background]="'url(' +item.author.avatar_url+ ')'"></div>
                <div class="box">
                    <label>{{item.author.loginname}}</label>
                    <div>
                        <time>{{item.create_at | myPipe}}</time>
                        <span>#分享</span>
                    </div>
                </div>
            </div>
            <div class="title-div">
                <strong>{{ item.title }}</strong>
            </div>
            <div class="foot-div">
                <div class="item click">
                    <ion-icon name="eye-outline"></ion-icon>
                    <span>{{ item.visit_count > 0 ? item.visit_count : '暫無閱讀' }}</span>
                </div>
                <div class="item reply">
                    <ion-icon name="text-outline"></ion-icon>
                    <span>{{ item.reply_count > 0 ? item.reply_count : '暫無評論' }}</span>
                </div>
                <div class="item">
                    <span>{{ item.last_reply_at | myPipe}}</span>
                </div>
            </div>
        </div>
    </div>
</ion-content>

這樣便完成了自定義管道的使用。