Angular2在自定义管道中使用基本管道

Rut*_*ren 15 angular-pipe angular

我想为基本的angular2管道添加一些额外的功能.

即.在货币管道上完成了一些额外的格式化.为此,我想在自定义管道的组件代码中使用现有管道.

有什么办法可以做到吗?

@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;
  }
}
Run Code Online (Sandbox Code Playgroud)

Sas*_*sxa 20

你可以扩展CurrencyPipe,像这样:

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;
  }
}
Run Code Online (Sandbox Code Playgroud)

如果你看一下光源,这与角管的工作方式类似......


(问题作者添加)

不要忘记导入CurrencyPipe类

import {CurrencyPipe} from 'angular2/common'; 
Run Code Online (Sandbox Code Playgroud)


pix*_*its 12

或者,您可以注入CurrencyPipe:

bootstrap(AppComponent, [CurrencyPipe]);
Run Code Online (Sandbox Code Playgroud)

管:

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

  • 我也喜欢这样.还有其他方法可以使用CurrencyPipe提供商吗?将它添加到bootstrap看起来有点乱.我尝试了以下但没有成功:@Pipe({name:'formatCurrency',providers:[CurrencyPipe],pipes:[CurrencyPipe]}) (4认同)
  • 好问题.我认为您还可以将[CurrencyPipe]指定为组件的依赖项:providers:[CurrencyPipe].我同意,它太糟糕了,它不能在Pipe级别工作. (2认同)