Ionic2學習筆記(3):Pipe


作者: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):*號


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM