Ionic2学习笔记(3):Pipe
来源:互联网 发布:淘宝宝贝访客突然增加 编辑:程序博客网 时间:2024/06/06 23:54
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/
阅读全文
0 0
- Ionic2学习笔记(3):Pipe
- Ionic2学习笔记(一)
- ionic2 学习笔记(三)
- Ionic2中使用管道(Pipe)
- Ionic2 学习笔记(二)-插件
- Ionic2学习笔记(0):HelloWorld
- Ionic2学习笔记(2):自定义Component
- ionic2学习笔记--新建页面
- Ionic2学习笔记(1):新建一个页面
- ionic2 angular2自定义pipe ,orderby实现排序
- 管道pipe——Linux学习笔记
- Linux学习笔记——管道PIPE
- linux学习笔记——pipe
- Ionic2学习笔记--Slide欢迎界面的实现
- ionic2--tabs笔记
- 鸟哥私房菜学习笔记八 管线命令(Pipe)
- ionic2学习文档
- Ionic2创建一个自定义pipe实现千分位号
- R语言2——时间序列分析
- 【CUGBACM15级BC第19场 A】hdu 5108 Alexandra and Prime Numbers
- MPP_Develop_Reference
- java事务全解析(五)--Template模式
- 字体菜单栏图标过小时,屏幕密度的修改方法
- Ionic2学习笔记(3):Pipe
- oracle database 12c Release 2-Managing Undo 翻译(第一章节)
- lintcode--
- 对ASP.NET网站高性能和多并发的设计的讨论
- apache1
- JVM命令参数大全
- 批量生成下载二维码图片
- 欢迎使用CSDN-markdown编辑器
- 使用Tensorboard 分析cifar10 model