Если нам потребуется некоторая предобработка при выводе данных, мы можем для этой цели написать свои собственные pipes. К примеру, нам надо выводить факториал определенного числа. Для этого добавим в проект новый файл factorial.pipe.ts:
К кастомному pipe должен применяться декоратор Pipe. Этот декоратор определяет метаданные, в частности, название pipe, по которому он будет использоваться:
123
@Pipe({
name: 'factorial'
})
Также класс реализует метод transform() интерфейса PipeTransform. Этот метод в качестве параметра принимает значение, к которому применяется pipe, а также опциональный набор параметров. А на выходе возвращается отформатированное значение.
Применим FactorialPipe в коде компонента:
1 2 3 4 5 6 7 8 91011121314
import{Component}from'@angular/core';@Component({selector:'my-app',template:` <div> Факториал числа {{ x }} равен {{ x | factorial }} </div> `,})exportclassAppComponent{x:number=5;}
Но чтобы задействовать FactorialPipe, его надо добавить в главном модуле приложения AppModule:
Добавим еще один pipe, который будет принимать параметры. Пусть это будет класс, который из массива строк будет создавать строку, принимая начальный и конечный индексы для выборки данных из массива. Для этого добавим в проект новый файл join.pipe.ts, в котором определим следующее содержимое:
В метод transform класса JoinPipe первым параметром передается массив, второй необязательный параметр start представляет начальный индекс, с которого производится выборка, а третий параметр end — конечный индекс.
С помощью метода slice() получаем нужную часть массива, а с помощью метода join() соединяем массив в строку.