Ionic2学习笔记(3):Pipe
2024-10-12 09:53:44
作者: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):*号
最新文章
- linux部分系统信息命令
- RX(Reactive Extinsion)和IX(Interactive Extinsion)库改名了
- 链剖&;LCT总结
- TextMate 小小心得
- 微软职位内部推荐-Software Engineer II
- AsyncTask的基础讲解
- window8左下角窗口和右上角窗口失效解决方法
- 使用RPM管理软件包
- HDU2054JAVA
- node.js + express(ejs) + mongodb(mongoose) 增删改实例
- C语言基础复习总结
- java_web学习(16)Ajax
- dbf导入sqlserver的方法
- 53、css补充
- Ubuntu系统桌面任务栏和启动器全部消失解决方案
- 对vue源码的初步认识和理解
- Spring boot Spring cloud 框架搭建
- Redis学习笔记:与SpringBoot结合使用
- Echarts地图悬浮框显示多组series数据以及修改地图大小
- linux init命令
热门文章
- Task:取消异步计算限制操作 &; 捕获任务中的异常
- 免费打造自己的个人网站,免费域名、免费空间、FTP、数据库什么的,一个不能少,没钱,也可以这么任性
- 如何将Icon转成Bitmap
- OpenCV基于傅里叶变换进行文本的旋转校正
- Senparc.Weixin.MP SDK 微信公众平台开发教程(六):了解MessageHandler
- javascript日常总结
- 移动端使用localResizeIMG4压缩图片
- Node.js入门:Node.js&;NPM的安装与配置
- [数据库事务与锁]详解八:底理解数据库事务乐观锁的一种实现方式——CAS
- 每天一个linux命令(27):linux chmod命令