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

时间： 2025-01-05 06:09:32

Ionic2学习笔记（3）：Pipe的相关文章

Ionic2学习笔记（3）：*号

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html ? ? ? ? ? ? 大家常常会在ionic2页面中见到*号的存在,如: <p *ngIf="someBoolean"><p> 含义与: <template [ngIf]="someBoolean"> <p></p> </template> 一样, 即:如果someBool

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016 ? ? 说明: 在本文发表的时候(2016-06-11),Ionic2是beta版本,所有还是会有一些改动比较大的地方: 点击查看 , 比如beta8版本(2016-06-06),相较于前面的版本就有一个特别大的改动的地方: @App and @Page should be replaced with @Component 基于这种情况,大家还是静静

Ionic2学习笔记（8）：Local Storage& SQLite

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html ? ? ? ? ?Ionic2可以有两种方式来存储数据,Local Storage和SQLite ? LocalStorage ? 因为比较容易访问,所以不适合存比较敏感性的数据比如可以存储: 用户是否登录的信息. 一些session信息等具体用法: 进入项目目录:cd MyFirstApp 在主页设置一个按钮,点击按钮,获取LocalStorage的数据并打印在控制台

Ionic2学习笔记（7）：Input

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html ? ? ? 我们先来看一个简单的输入用户名和密码点击登录的界面: ? 进入项目目录:cd MyFirstApp 修改主页代码: app/pages/home/home.html 预览一下效果:ionic serve -l 我们有两种方式来获取输入的数据: ? 第一种:通过[(ngModel)]来获取参数值,修改home.html的代码为如下形式在home.ts增加一个获取用

Ionic2学习笔记（6）：NAVIGATION

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html ? ? ? ?Ionic2中创建一个页面很方便,在页面之间相互切换也很方便,我们在实现如下需求: 在主页面创建一个按钮,点击按钮,跳转到一个新页面,在跳转过程中,我们可以也可以在页面之间传递数据. 进入项目目录:cd MyFirstApp 创建一个新页面: ionic g page SecondPage 将@import "../pages/second-page/secon

Ionic2学习笔记（9）：访问本地设备

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html ? ? ? ? Ionic2提供了访问本地设备的方法,但是需要安装Cordova依赖,我们以调用摄像头拍照为例来说明: 进入项目目录:cd MyFirstApp npm install ionic-native –save 增加调用Camera的插件:ionic plugin add cordova-plugin-carmera 在Home.html中,增加如下代码: 点击b

Ionic2学习笔记（5）：Provider

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html ? ? Provider是一种为App提供数据源的方式, 举个例子: 我们从: https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot 获取Json格式的数据,并在程序启动的时候,在控制台打印获取的数据信息: 进入项目目录:cd MyFirstApp 创建一个Provider:ionic g provider New

Ionic2学习笔记

Component nav: <ion-nav [root] = 'rootComponent'></ion-nav> ....import {Nav} from 'ionic-angular';.... export class AppComponent{ @ViewChild(Nav) private nav:Nav; push(){ nav.push(PageOne,{id:1,name:'ztw'}); } } @Component({template:`<p>

linux 学习笔记管道 pipe ls cp mv

如ls |less -MN 含义把ls结果输出到less [ls] ==管道== [more] ls命令 ls -a 展示隐藏的文件 <隐藏文件一般以. 开始> ls -t 以时间戳排序 ls -F ls -l 显示长列 ls -R 递归显示信息创建文件touch <touch filenames> 创建文件夹 mkdir mkdir dir3 dir4 dir5 建立多个文件夹 mkdir ~/games 在登录用户的本目录下建立games文件夹 mkdir -p di