Angular2 中管道@Pipe的简单用法

在Angular2中有各种各样的类修饰器，比如：@App，@Component，@input，@output等等，最近需要用到数据过滤用到了管道@Pipe，下面记录简单@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