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

4 ответа

Решение

Вы можете продлить 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;
  }
}

Если вы посмотрите на источник, это похоже на то, как работают угловые трубы...


(Добавлено автором вопроса)

Не забудьте импортировать класс CurrencyPipe

import {CurrencyPipe} from 'angular2/common'; 

Кроме того, вы можете ввести 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);
    }
}

Приведенное выше решение с удлинением одной трубы от другой работает, но оно создает излишнюю сложность. Следуя лучшим практикам программирования, мы должны, если это возможно, отдавать предпочтение композиции, а не наследованию.

Решение здесь — просто внедрить один канал в другой, используя внедрение зависимостей (как предложил @pixelbits).

Но еще одна важная вещь: нам нужно добавить инъекционный канал в массив провайдеров в модуле, над которым мы работаем.

      @NgModule(
  providers: [PipeToBeInected]
) class MyModule {}

Вы можете использовать Угловые трубы в ваших пользовательских труб.

Во-первых, в вашем файле канала вы должны импортировать желаемый канал, например.

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

А затем используйте его в своей пользовательской трубе:

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

}

Проверено на А6.

Другие вопросы по тегам