Angular2 管道pipe,如何自定义管道
2016-11-20 15:18
369 查看
作为一名前端er,我们的数据要推入到视图中,但是HTML视图中显示的格式和数据未必完成相同,比如我们的数据都是小写,但是视图中需要显示大写,如果我们在代码中另存一组转换为大写的数据,不但会使代码变得复杂难以维护,而且可阅读性差,ng2中的管道完美的解决了这个问题。
ng2内置了很多管道,比如DatePipe 、 UpperCasePipe 、 LowerCasePipe 、 CurrencyPipe 和 PercentPipe,可以直接在任何模板中使用。本文重点讲解自定义管道,点击观看更多管道知识
我们项目中经常需要将时间转换,但是ng2中所带的Datapipe并不合适,因为要转换为中文,比如时间转换为刚刚,1小时前,一天前,一周前等等,这时候就需要自定义管道。
写个简单的例子来说明自定义管道:将阿拉伯数字0—3转换为中文 零—三
自定义管道代码:https://github.com/nuonuoge/ng2-pipe-example(欢迎给星)
@Pipe装饰器告诉 Angular :这是一个管道,Pipe装饰器是从 Angular 的 core 库中引入的。Pipe中的name用来定义管道在视图中使用的名称。
PipeTransform中定义了transform,transform是管道的基本要素,用于实现管道的功能。
transform中的第一个参数value是数据的传入值,第二个参数是我们自定义的参数,而且可以定义多个参数(多个参数用法:数据|定义的管道名:第一个参数:第二个参数:第三个参数),本管道只展示了一个自定义参数(language),用来判断视图中显示中文还是英文。
ng2中管道支持链式调用,参见code3
NgModule中声明管道
ts中代码
HTML代码
code1:不带参数
code2:带参数
code3:带参数,链式调用
ng2内置了很多管道,比如DatePipe 、 UpperCasePipe 、 LowerCasePipe 、 CurrencyPipe 和 PercentPipe,可以直接在任何模板中使用。本文重点讲解自定义管道,点击观看更多管道知识
我们项目中经常需要将时间转换,但是ng2中所带的Datapipe并不合适,因为要转换为中文,比如时间转换为刚刚,1小时前,一天前,一周前等等,这时候就需要自定义管道。
写个简单的例子来说明自定义管道:将阿拉伯数字0—3转换为中文 零—三
自定义管道代码:https://github.com/nuonuoge/ng2-pipe-example(欢迎给星)
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'i18n'}) export class i18nPipe implements PipeTransform { transform(value: number, language: string): string { let isen:boolean = language=='en'?true:false; if(value==0){ if(isen){ return 'zero'; }else{ return '零'; } }else if(value==1){ if(isen){ return 'first'; }else{ return '一'; } }else if(value==2){ if(isen){ return 'second'; }else{ return '二'; } }else if(value==3){ if(isen){ return 'third'; }else{ return '三'; } }else{ return value.toString(); } }
@Pipe装饰器告诉 Angular :这是一个管道,Pipe装饰器是从 Angular 的 core 库中引入的。Pipe中的name用来定义管道在视图中使用的名称。
PipeTransform中定义了transform,transform是管道的基本要素,用于实现管道的功能。
transform中的第一个参数value是数据的传入值,第二个参数是我们自定义的参数,而且可以定义多个参数(多个参数用法:数据|定义的管道名:第一个参数:第二个参数:第三个参数),本管道只展示了一个自定义参数(language),用来判断视图中显示中文还是英文。
ng2中管道支持链式调用,参见code3
NgModule中声明管道
import { i18nPipe } from './i18.pipe'; @NgModule({ imports: [ BrowserModule,FormsModule,HttpModule ], declarations: [ AppComponent, i18nPipe ], providers: [ ], bootstrap: [ AppComponent ] })
ts中代码
export class AppComponent { testi18:number[]; constructor() {} ngOnInit() { this.testi18=[0,1,2,3]; } }
HTML代码
code1:不带参数
<div *ngFor="let item of testi18"> <span>{{item|i18n}}</span> </div>
code2:带参数
<div *ngFor="let item of testi18"> <span>{{item|i18n:'en'}}</span> </div>
code3:带参数,链式调用
<div *ngFor="let item of testi18"> <span>{{item|i18n:'en'|uppercase}}</span> </div>
相关文章推荐
- Angular2管道Pipe及自定义管道格式数据用法实例分析
- [转]Angular2 使用管道Pipe以及自定义管道格式数据
- Angular2踩坑之自定义Pipe管道
- 学习ASP.NET Core, 怎能不了解请求处理管道[3]: 自定义一个服务器感受一下管道是如何监听、接收和响应请求的
- ionic2 angular2自定义pipe ,orderby实现排序
- 程序生成的管道Pipe或风管Duct,如何修改他们的系统类型
- Linux环境编程--如何用C语言创建多进程运行以及简单的pipe管道使用
- Angular CurrencyPipe货币管道关于人民币符号¥的问题
- angular2--pipe管道使用
- Angular如何在模板驱动表单中自定义校验器
- Angular2 使用管道Pipe以及自定义管道格式数据
- Angular2的管道Pipe的使用方法
- 自定义一个服务器感受一下管道是如何监听、接收和响应请求的
- Angular最新教程-第十三节 管道Pipes 自定义管道
- Angular2 中管道@Pipe的简单用法
- Angular 2 + 折腾记 :(5) 动手实现一个自定义管道
- Angular 2的管道Pipe
- 如何使用请求管道中事件实现自定义方法
- Angular 2的管道Pipe
- Angular2-管道Pipe