Ionic2學習筆記（3）：Pipe http://www.cnblogs.com/greyzeng/p/5538630.html

作者：Grey

原文位址： http://www.cnblogs.com/greyzeng/p/5538630.html

Pipe類似過濾器，比如，在一個字元串要展現在頁面之前，

我們需要對這個字元串進行一些操作，比如：将字元串轉化為大寫，加一個字首/字尾……

Pipe的作用就是來實作類似的需求：

模型如下：

假設一個字元串: "hello", 我們在展示這個字元串的時候，需要先轉換為大寫，

然後加一個字尾 " WORLD", 最後字元串展示的效果是HELLO WORLD

因為需求比較簡單，我們可以用一個Pipe來實作轉大寫和增加字尾的功能，

• 進入項目：cd MyFirstApp

• 建立一個名字為NewPipe的Pipe，

  指令：ionic g pipe NewPipe

  

  項目目錄會多出一個檔案夾：

  

• 打開NewPipe.ts, 修改其中的transform方法

  

• 在../app/home/home.ts中引入這個Pipe

  

• 在../app/home/home.html中增加字元串顯示：

  

  在../app/home/home.ts中，設定字元串的值：

  

• 注入Pipe

  在../app/home/home.html中，

  

  注意，這裡的newPipe是這個名字：

  

• 運作，ionic serve -l

參考:

http://www.joshmorony.com/how-to-use-pipes-to-manipulate-data-in-ionic-2/

http://mcgivery.com/understanding-ionic-2-pipe/

------

上一篇：Ionic2學習筆記（2）：自定義Component

下一篇：Ionic2學習筆記（4）：*号