Pipe¶

Angular pipe, или просто фильтр, нужен для преобразования данных прямо в HTML-шаблоне. Например, отображение даты и времени в желаемом формате или задание формата вывода числового значения.

В Angular имеется ряд встроенных фильтров, но также предусмотрена возможность создания собственных.

Рассмотрим пример использования встроенного date pipe.

date-pipe-example.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@Component({
    selector: 'date-pipe-example',
    template: `
        <p>
            Transformed date:
            {{ exampleDate | date: 'dd.MM.yyyy' }}
        </p>
    `,
})
export class DatePipeExampleComponent {
    exampleDate = new Date(2000, 12, 12);
}

Как видно из примера, наименование Angular pipe указывается после символа |, следующим за значением, которое необходимо преобразовать.

Некоторые Angular фильтры, как date, принимают параметры, передаваемые после имени фильтра и разделяемые символом :. В данном примере передается формат отображения даты. Подробно со всеми аргументами date можно ознакомиться на официальном сайте.

Ниже приведен список некоторых наиболее часто используемых встроенных Angular pipe:

• date — преобразование даты;
• number — преобразование числа;
• uppercase (lowercase) — приведение строкового значения в верхний (нижний) регистр;
• slice — используется для ограничения вывода информации, в качестве параметров принимает начало и конец интервала отображаемых данных, применяется совместно с директивой *ngFor.

Пример использования slice.

slice-pipe-example.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@Component({
    selector: 'slice-pipe-example',
    template: `
        <p *ngFor="let user of list | slice: 0:1">
            {{ user }}
        </p>
    `,
})
export class SlicePipeExampleComponent {
    list = ['Jack', 'Alice', 'Michael'];
}

Отсчет выводимых элементов, как и индекс, начинается с нуля.

Полный список встроенных Angular pipe также можно найти в документации.

К одному значению допустимо одновременное применение нескольких фильтров.

1

{{someString | pipe1 | pipe2 | pipe3 | ... }}

Встроенные фильтры подходят в основном для решения "базовых" задач. Поэтому часто требуется создавать собственные (Angular custom pipe).

Рассмотрим на примере создание cutTextPipe, который обрезает слово, если его длина превышает заданное количество символов, и добавляет в конце многоточие.

cut-text.pipe.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@Pipe({ name: 'cutText' })
export class CutTextPipe implements PipeTransform {
    transform(
        value: string,
        maxLength: number = 200
    ): string {
        if (value.length > maxLength)
            return `${value.substring(0, maxLength)}...`;
        else return value;
    }
}

Angular pipe — это класс, который предваряется декоратором @Pipe() и реализует интерфейс PipeTransform с одним единственным методом transform().

В примере декоратору в качестве аргумента передается объект со свойством name, значение которого является именем фильтра. Именно по нему он будет вызываться в HTML-шаблоне.

Метод transform() в качестве первого аргумента принимает преобразуемое значение, далее — параметры в порядке их передачи в HTML-шаблоне. Метод обязательно должен возвращать итоговое значение.

Как и компоненты, фильтры должны объявляться в свойстве declarations того модуля, в котором они будут использоваться.

Pure & Impure Angular pipes¶

Различают два типа фильтров: pure (по умолчанию) и impure.

Отличаются они по принципу работы механизма отслеживания изменений.

Для первого типа обновление выражения происходит только при его прямом изменении или смены ссылки, если речь идет о массивах и объектах.

Выражение с примененным к нему фильтром второго типа (impure) будет обновляться при любом изменении данных, а также в ответ на любое фиксирующееся в приложении событие, например, клик мыши.

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

Для создания impure pipe в объекте, передаваемому декоратору, необходимо указать значение свойства pure false.

1
2
3
4

@Pipe({
    name: 'cutText',
    pure: false
})

Создавать impure Angular pipe следует в исключительных случаях, поскольку такое частое обновление значения выражения требует больших ресурсов.

Ссылки¶

• Pipes

Комментарии