Каналы в Angular

Каналы (фильтры) — классы, целью которых является преобразование данных перед их получением компонентом. Каналы позволяют определять логику преобразования в автономных классах, чтобы их можно было последовательно применять в приложении.

Декоратор @Pipe применяется к классу и используется для задания имени, по которому канал можно использовать в шаблоне.

// PIPE
name = ‘TestingPipe’;
pi = Math.PI;
money = 678;
date = new Date();
amount = 0.45;
object = {
foo: ‘bar’,
baz: ‘qux’,
nested:
{
xyz: 3,
numbers: [1, 2, 3]
}
};
// END PIPE

name | slice:0:4 | uppercase: TEST
pi | number 3.142
pi | number:’1.3-4′ 3.1416
pi | number:’1.3-4′ 03.1416
money | currency:’USD’:true $678.00
date | date Jun 8, 2018
date | date:’fullDate’ Friday, June 8, 2018
date | date:’shortDate’ 6/8/18
amount | percent 45%

Пример фильтра

// 10 — значение; customTest — имя фильтра; 2:’=’ — аргументы фильтра
{{ 10 | customTest:2:’=’ }}
// =100import { Pipe, PipeTransform } from ‘@angular/core’;

// число возведем в степень, котор. передадим как параметр
// + параметр котор. добавляется как префикс финальному числу
@Pipe({
name: ‘customTest’
})
export class CustomTestPipe implements PipeTransform {
// value — то к чему применяется pipe
transform(value: any, powNumber: number = 1, symbol: string): any {
return symbol + Math.pow(value, powNumber);
}
}

Результат метода transform используется в выражении привязки.

Оптимизация и pipe: pure false или true

При создании pipe мы можем добавить параметр pure.

По умолчанию стоит pure: true, канал повторно обрабатывается только при изменении входного значения или его аргументов.

Ставя каналу pure: false вы тем самым даете Angular понять, что канал нечист, то есть канал зависит от данных, которые не могут быть определены в процессе поиска изменений при наличии нового значения. Например, при изменении массива (Angular не обнаруживает изменения, происходящие в массивах) cars pipe запускаться не будет. Данный флаг (pure: false) нужно использовать аккуратно, так как он влияет на быстродействие.

Возьмите за правило делать нечистый канал как можно более простым, чтобы не грузить систему.

Встроенные каналы

• number
• currency
• percent
• date
• uppercase
• lowercase
• json — канал json создает представление значения данных в формате JSON (для создания JSON используется JSON.stringify); часто применяется для отладки, так как pure у этого канала всегда равен false и поэтому канал json реагирует на каждое изменение в приложении
• slice
• async — канал подписывается на Observable или Promise и выводит последнее из полученных значений.

Взято с http://web.archive.org/web/20190406115717/http://coldfox.ru:80/article/5b1d3233252b3744ef547528/%D0%9A%D0%B0%D0%BD%D0%B0%D0%BB%D1%8B-%D0%B2-Angular