Каналы в Angular

Jun 10, 2018

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

Декоратор @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:'=' }}
// =100
import { 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 и выводит последнее из полученных значений.
Добавить комментарий