在 Angular 1 中，自定义 Filter 可以这么做。
angular
.module('app')
.filter('leftPad', function(value, anotherValue){
// do something with `value` and `anotherValue`
// and return a value
});然后用的时候可以这么用
<p>{{ num | leftPad:searchValue }}</p>然后 controller 中可以这么用
controller($filter) {
var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
this.numbers = numbers.map(number => $filter('leftPad')(number, searchValue));
}那么在 Angular 2 中怎么做呢？
首先一点，在 Angular 2 中已经没有 filter 的概念了，取而代之的是 Pipe 的概念。但是其本质和 filter 是一样的。我们来看看具体怎么使用。
当然了，首先还是先定义。主要的内容就是要实现一个 PipeTransform 的 transform 方法。
// leftPad.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'leftPad'})
export class LeftPad implements PipeTransform {
transform(value: number, anotherValue: number): string {
// do something with `value` and `anotherValue`
// and return a value
}
}然后在模板中使用的方法就是：
<p>{{ num | leftPad:searchValue }}</p>那如果想在 component 中使用，怎么用呢？其实也很简单
export class App {
constructor(private leftPad: LeftPad) {
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
this.numbers = numbers.map(number => this.leftPad.transform(number, searchValue));
}
}调用通过 ID 注入进来的 LeftPad 的 实例的 transform 方法即可。
那如果只需要一个参数怎么办呢？
一种就是直接删掉后面的一个参数，例如删掉 searchValue 这个参数。另一种就是兼容两种参数调用，定义 pipe 的时候给不是必须的参数增加一个可选的 ? 标志即可。
最后，在使用的时候，不要忘记添加 providers 哦。
No comments