在 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 哦。