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.