web-dev-qa-db-ja.com

Angular2はカスタムパイプで基本パイプを使用します

基本的な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;
  }
}
angularangular-pipe
15
Rutger van Baren

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 を見ると、angularパイプが機能する方法と似ています...

（質問の作成者が追加）

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

import {CurrencyPipe} from 'angular2/common';
18
Sasxa

または、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);
    }
}
12
pixelbits

カスタムパイプでAngularパイプを使用できます。

まず、パイプファイルで、目的のパイプをインポートする必要があります。

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

そして、それをカスタムパイプで使用します。

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

}

A6でテスト済み。

0
gesiud