2016-03-05 5 views
7

基本的なangle2パイプにいくつかの追加機能を追加したいと思います。Angular2はカスタムパイプの基本パイプを使用します

ie。通貨パイプで何らかの余分な書式設定が行われました。これを行うには、私のカスタムパイプのコンポーネントコードに既存のパイプを使用したいと思います。

どうすればよいですか?

@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; 
    } 
} 

答えて

14

あなたはこのように、何かを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; 
    } 
} 

をあなたはsourceを見れば、それがどのように動作するか角パイプに似て...


(によって追加されました質問投稿者)

CurrencyPipeクラスをインポートするのを忘れないでください

import {CurrencyPipe} from 'angular2/common'; 
+0

のthnx!私はあなたの答えにインポート行を追加し、CurrencyPipeがどこからインポートされたかを調べるために検索しなければならなかった。 –

9

また、あなたはCurrencyPipeを注入することができます

bootstrap(AppComponent, [CurrencyPipe]); 

パイプ:

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

私もこのように好きです。 CurrencyPipeプロバイダに別の方法がありますか?ブートストラップに追加するのはちょっと面倒です。私は成功せず、次を試してみました: @Pipe({ 名: 'formatCurrency'、 プロバイダ:[CurrencyPipe]、 パイプ:[CurrencyPipe] }) –

+0

良い質問。私はあなたがコンポーネントの依存関係として[CurrencyPipe]を指定することもできると思います:プロバイダ:[CurrencyPipe]。私は同意する、それはあまりにも悪いそれはパイプレベルで動作しません。 – pixelbits

関連する問題