Angular2 use basic pipe in custom pipe

问题:

I'd like to add some additional functionality to the basic angular2 pipes.

ie. some extra formatting done on the currency pipe. To do that I'd like to use the existing pipe in the component code of my custom pipe.

Is there any way this can be done?

@Pipe({name: 'formatCurrency'})
export class FormatCurrency implements PipeTransform {
  transform(value:number, args:string[]) : any {
    var formatted = value/100;

    //I would like to use the basic currecy pipe here.
    ///100 | currency:'EUR':true:'.2'

    return 'Do some extra things here ' + formatted;
  }
}

回答1:

You can extend CurrencyPipe, something like this:

export class FormatCurrency extends CurrencyPipe implements PipeTransform {
  transform(value: any, args: any[]): string {
    let formatedByCurrencyPipe = super.transform(value, args);
    let formatedByMe;
    // do your thing...
    return formatedByMe;
  }
}

If you look at the source, that's similar to how angular pipes work...

---

(Added by question author)

Don't forget to import the CurrencyPipe Class

import {CurrencyPipe} from 'angular2/common'; 

回答2:

Alternatively, you can inject the CurrencyPipe:

bootstrap(AppComponent, [CurrencyPipe]);

Pipe:

@Pipe({
    name: 'mypipe'
})
export class MyPipe {
    constructor(private cp: CurrencyPipe) {
    }
    transform(value: any, args: any[]) {
        return this.cp.transform(value, args);
    }
}

回答3:

You can use Angular pipes in your custom pipe.

First, in your pipe file, you must import desired pipe eg.

import { SlicePipe } from '@angular/common';

And then use it in your custom pipe:

  transform(list: any, end: number, active: boolean = true): any {
return active ? new SlicePipe().transform(list, 0, end) : list;

}

Tested on A6.