在Angular2中有各种各样的类修饰器,比如:@App,@Component,@input,@output等等,最近需要用到数据过滤用到了管道@Pipe,下面记录简单@Pipe的简单用法。
什么是@Pipe(管道)?
其实这是一个过滤器的修饰声明,和Angular1中的filter的作用是一样的,有了filter能对数据处理提供强大的通用性和便利性,不过从Angular1到Angular2发生了巨大的转变,到了Angular2使用@Pipe是等同于Angular1中的filter,名字变化了而已。
@Pipe基本语法
import { Pipe } from 'angular2/core'
@Pipe({
name: 'pipe' // 使用时的名称
})
export class TestPipe{
/**
* @description 具体处理方法的实现
* @param value 待处理的数据
* @param args 附加参数
* @return 处理完成的数据
*/
transform(value, args) {
return value;
}
}
Angular1中的filter
.filter('hello', function() {
return function(value) {
return 'Hello ' + value;
}
});
Angular2中的@Pipe
import { Pipe } from 'angular2/core'
@Pipe({
name: 'Neo'
})
export class HelloPipe {
transform( value ) {
return "Hello " + value;
}
}
两者在页面中使用基本一致
<!-- html -->
<span>{{ 'Neo' | hello }}<span> <!-- 输出Hello 'Neo' -->
完整的Angular2@Pipe的使用方法如下:
1、声明一个管道ts,用于进行运算( calculate.pipe.ts )
// 导入模块
import {Pipe, PipeTransform} from "@angular/core";
// 管道名称
@Pipe({
name: "calculatePipe"
})
export class CalculatePipe implements PipeTransform {
// 参数说明:
// value是在使用管道的时候,获取的所在对象的值
// 后面可以跟若干个参数
// arg: 自定义参数, 数字类型, 使用的时候, 使用冒号添加在管道名称后面
transform(value:number, arg:number) {
return value * 10 * arg;
}
}
2、在app.module.ts主模块中引入管道
...
import { CalculatePipe } from "../pipe/calculate.pipe";
@ngModule({
declarations: [
CalculatePipe
]
})
...
3、组件模板中使用
<p>@Pipe管道的例子</p>
<p>
<input type="text" [(ngModel)]="number" name="number" class="form-control"/>
</p>
<!-- 不仅获取当前值,而且传递了一个参数,使用冒号添加到后面 -->
<p>{{ number | calculatePipe : 10 }}</p>
Angular2 中的一些内置管道:
五种内置管道,以及Angular官方的介绍
Pipe | Usage | Example |
---|---|---|
DatePipe | date | {{ dateObj | date }} // output is ‘December 8, 2017’ |
UpperCasePipe | uppercase | {{ value | uppercase }} // output is ‘SOME TEXT’ |
LowerCasePipe | lowercase | {{ value | lowercase }} // output is ‘some text’ |
CurrencyPipe | currency | {{ 30.00 | currency:’USD’:true }} // output is ‘$30’ |
PercentPipe | percent | {{ 0.1 | percent }} //output is 10% |
参考资料如下:
https://angular.io/guide/pipes
http://blog.csdn.net/u010730126/article/details/60370716
https://segmentfault.com/a/1190000008262691