Ionic2学习笔记（3）：Pipe

矫情吗；* 2021-12-17 01:17 277阅读 0赞

## 作者：[Grey][] ##

# 原文地址： [http://www.cnblogs.com/greyzeng/p/5538630.html][http_www.cnblogs.com_greyzeng_p_5538630.html] #

Pipe类似过滤器，比如，在一个字符串要展现在页面之前，

我们需要对这个字符串进行一些操作，比如：将字符串转化为大写，加一个前缀/后缀……

Pipe的作用就是来实现类似的需求：

模型如下：

假设一个字符串: "hello", 我们在展示这个字符串的时候，需要先转换为大写，

然后加一个后缀 " WORLD", 最后字符串展示的效果是HELLO WORLD

![683206-20160528232333147-765288969.png][]

因为需求比较简单，我们可以用一个Pipe来实现转大写和增加后缀的功能，

*  进入项目：cd MyFirstApp 
 *  新建一个名字为NewPipe的Pipe， 
    
    命令：ionic g pipe NewPipe 
    
    ![683206-20160528232333538-299783832.png][]
    
    项目目录会多出一个文件夹： 
    
    ![683206-20160528232333913-1034448344.png][]
 *  打开NewPipe.ts, 修改其中的transform方法 
    
    ![683206-20160528232334444-1022052786.png][]
 *  在../app/home/home.ts中引入这个Pipe 
    
    ![683206-20160528232334866-123379439.png][]
 *  在../app/home/home.html中增加字符串显示： 
    
    ![683206-20160528232335459-1655349836.png][]
    
    在../app/home/home.ts中，设置字符串的值： 
    
    ![683206-20160528232335959-128657961.png][]
 *  注入Pipe 
    
    在../app/home/home.html中， 
    
    ![683206-20160528232336366-140764864.png][]
    
    注意，这里的newPipe是这个名字： 
    
    ![683206-20160528232336928-1879225811.png][]
 *  运行，ionic serve -l

![683206-20160528232337444-620710936.png][]

# 参考: #

[http://www.joshmorony.com/how-to-use-pipes-to-manipulate-data-in-ionic-2/ ][http_www.joshmorony.com_how-to-use-pipes-to-manipulate-data-in-ionic-2_]

[http://mcgivery.com/understanding-ionic-2-pipe/ ][http_mcgivery.com_understanding-ionic-2-pipe_]

\------

上一篇：[Ionic2学习笔记（2）：自定义Component][Ionic2_2_Component]

下一篇：[Ionic2学习笔记（4）：\*号][Ionic2_4]

转载于:https://www.cnblogs.com/greyzeng/p/5538630.html

[Grey]: http://www.cnblogs.com/greyzeng/
[http_www.cnblogs.com_greyzeng_p_5538630.html]: http://www.cnblogs.com/greyzeng/p/5538630.html
[683206-20160528232333147-765288969.png]: /images/20211214/50581f95b40042c09b35d98af353b698.png
[683206-20160528232333538-299783832.png]: /images/20211214/6c901f744b374f2f945d1e00e7e2fc68.png
[683206-20160528232333913-1034448344.png]: /images/20211214/a0bc0c760854491bab1d529752bdc6b5.png
[683206-20160528232334444-1022052786.png]: /images/20211214/23a1ade7d7da4f429e06d350a4979326.png
[683206-20160528232334866-123379439.png]: /images/20211214/09d11d17166f4b6b941ea0f06a3ba3cc.png
[683206-20160528232335459-1655349836.png]: /images/20211214/96c6500b3eae4b259bcf1056b4d9e00f.png
[683206-20160528232335959-128657961.png]: /images/20211214/6177cf636a8b4cbba179b3da30f0245e.png
[683206-20160528232336366-140764864.png]: /images/20211214/e431633d6dc94ada9ff9cc1a210dbf7c.png
[683206-20160528232336928-1879225811.png]: /images/20211214/14c6ed93338f414fb40a1a8dfa10e5e7.png
[683206-20160528232337444-620710936.png]: /images/20211214/92d49a059bd74c068977a3dfb1613e68.png
[http_www.joshmorony.com_how-to-use-pipes-to-manipulate-data-in-ionic-2_]: http://www.joshmorony.com/how-to-use-pipes-to-manipulate-data-in-ionic-2/
[http_mcgivery.com_understanding-ionic-2-pipe_]: http://mcgivery.com/understanding-ionic-2-pipe/
[Ionic2_2_Component]: http://www.cnblogs.com/greyzeng/p/5536298.html
[Ionic2_4]: http://www.cnblogs.com/greyzeng/p/5544479.html