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

Ionic2学习笔记(3):Pipe的更多相关文章

  1. Ionic2学习笔记(4):*号

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html                     大家常常会在ionic2页面中见到*号 ...

  2. Ionic2学习笔记(2):自定义Component

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html                     上一篇提到,Ionic2提供了很多Co ...

  3. Ionic2学习笔记(10):扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  4. Ionic2学习笔记(9):访问本地设备

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html               Ionic2提供了访问本地设备的方法,但是需要安装 ...

  5. Ionic2学习笔记(8):Local Storage& SQLite

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html              Ionic2可以有两种方式来存储数据,Local S ...

  6. Ionic2学习笔记(7):Input

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html           我们先来看一个简单的输入用户名和密码点击登录的界面:   ...

  7. Ionic2学习笔记(6):Navigation

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html           Ionic2中创建一个页面很方便,在页面之间相互切换也很方 ...

  8. Ionic2学习笔记(5):Provider

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html             Provider是一种为App提供数据源的方式, 举个 ...

  9. Ionic2学习笔记(0):HelloWorld

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...

随机推荐

  1. 从KRE到XRE:ASP.NET 5中正在消失的那些K

    前几天写了篇博客ASP.NET 5中的那些K,刚把ASP.NET 5中的那些K搞明白了些,昨天发现微软正在让那些K消失. 首先是在 KRuntime 的git日志中发现的: * Runtime ren ...

  2. 【转】EntityFramework(EF)贪婪加载和延迟加载的选择和使用

    原谅:http://www.weixq.cn/Article/Detail/906 贪婪加载:顾名思议就是把所有要加载的东西一 次性读取 using (var context = new MyDbCo ...

  3. Wix 安装部署教程(十二) -- 自动更新WXS文件

    上一篇分享了一个QuickWIX,用来对比两个工程前后的差异,但是这样还是很繁琐,而且昨天发现有Bug,目录对比有问题.这次改变做法,完全让程序自动去更新WXS文件,然后再用CCNet去自动编译,这样 ...

  4. Programming Erlang 学习笔记(一)

    入门 启动Shell 在cmd中输入命令”erl”,百分号(%)表示一个注释的开始,从百分号开始到这行结束的所有文本都被看做是注释. 一个完整的命令需要以一个句点和一个回车结束. 退出erlang的命 ...

  5. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  6. 【译】Activitys, Threads和 内存泄露

    Android编程中一个共同的困难就是协调Activity的生命周期和长时间运行的任务(task),并且要避免可能的内存泄露.思考下面Activity的代码,在它启动的时候开启一个线程并循环执行任务. ...

  7. Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

    引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...

  8. CSS3动画:YouTube的红色激光进度条

    本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...

  9. Hibernate inverse用法(转载)

    出处:http://blog.csdn.net/xiaoxian8023/article/details/15380529 一.Inverse是hibernate双向关系中的基本概念.inverse的 ...

  10. jsp中运用application实现共享留言板功能

    jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...