Что такое Pipe в Angular?

Что такое Pipe в Angular?

Pipe (труба/канал) в Angular — это встроенный механизм для **преобразования данных прямо в HTML. Это чистая, декларативная функция, принимающая входное значение и возвращающая преобразованное, предназначенное для использования в шаблонах. Основная цель — отделить логику форматирования данных от бизнес. используются для форматирования дат, чисел, строк, валют, а также для фильтрации и сортировки массивов (хотя последнее имеет нюансы).

Основные характеристики и преимущества Pipes

• Чистота (Pure по умолчанию): Pure Pipe автоматически отслеживает изменения своих входных аргументов (примитивы или ссылки на объекты) и повторно выполняется только при их изменении. Это обеспечивает высокую производительность.
• Неизменяемость: Поскольку pure не изменяет исходные данные, а возвращает новое значение, это соответствует принципам функционального программирования и упрощает отладку.
• Декларативность: Преобразование данных описывается прямо в шаблоне с помощью синтаксиса {{ value | pipeName:argument }}, что делает код шаблона более читаемым.
• Цепочность (Chaining): Можно последовательно применять несколько пайпов: {{ value | pipeA | pipeB }}.
• Аргументы: Большинство пайпов принимают дополнительные параметры для настройки: {{ date | date:'dd.MM.yyyy HH:mm' }}.

Встроенные (Built-in) Pipes

Angular предоставляет набор готовых пайпов для частых задач:

// Примеры в шаблоне компонента:
<p>{{ title | uppercase }}</p> <!-- Преобразует строку в верхний регистр -->
<p>{{ price | currency:'EUR':'symbol':'1.2-2' }}</p> <!-- Форматирует число как валюту Евро -->
<p>{{ currentDate | date:'fullDate' }}</p> <!-- Форматирует дату -->
<p>{{ percentage | percent:'1.2-2' }}</p> <!-- Форматирует число как процент -->
<p>{{ data | json }}</p> <!-- Отладочный пайп для вывода объекта в формате JSON -->
<p>{{ collection | slice:1:3 }}</p> <!-- Возвращает подмассив (срез) -->

Создание пользовательского Pipe

Создать свой пайп очень просто. Необходимо реализовать интерфейс PipeTransform и декорировать класс @Pipe.

import { Pipe, PipeTransform } from '@angular/core';

// Декоратор @Pipe определяет имя для использования в шаблоне
@Pipe({
  name: 'reverse', // Имя пайпа в шаблоне: {{ value | reverse }}
  pure: true // Можно явно указать. По умолчанию true.
})
export class ReversePipe implements PipeTransform {
  // Обязательный метод transform
  transform(value: string): string {
    if (!value) return '';
    return value.split('').reverse().join('');
  }
}

После объявления в модуле (часто через declarations в NgModule или standalone: true), его можно использовать:

<p>{{ 'Hello World' | reverse }}</p> <!-- Выведет: dlroW olleH -->

Impure Pipe: Когда использовать

Impure Pipe (pure: false) выполняется при каждой проверке изменений (change detection cycle), независимо от того, изменились ли аргументы. Это может быть дорогостоящим для производительности, но иногда необходимо.

@Pipe({
  name: 'filterArray',
  pure: false // Impure пайп!
})
export class FilterArrayPipe implements PipeTransform {
  transform(items: any[], searchTerm: string): any[] {
    // Этот пайп будет запускаться очень часто!
    if (!items || !searchTerm) return items;
    return items.filter(item => item.name.includes(searchTerm));
  }
}

Важное замечание: Использование impure для фильтрации или сортировки массивов может привести к проблемам с производительностью. Часто более эффективно выполнять такую логику в компоненте и передавать в шаблон уже готовый результат.

Асинхронные данные и AsyncPipe

Особое место занимает AsyncPipe. Он автоматически подписывается на Observable или Promise, извлекает из него последнее emitted значение и отписывается при уничтожении компонента, предотвращая утечки памяти.

// В компоненте
data$: Observable<string> = this.service.getData();

// В шаблоне
<p>{{ data$ | async }}</p> <!-- Пайп сам обработает подписку и отписку -->

Итог

Pipe — это мощный, производительный и элегантный инструмент Angular для:

• Форматирования отображения данных без изменения исходных значений.
• Создания читаемого и декларативного кода шаблонов.
• Изоляции логики преобразования в переиспользуемые единицы.
• Безопасной работы с асинхронными потоками данных (через AsyncPipe).

Правильное использование встроенных и создание чистых кастомных пайпов значительно улучшает архитектуру приложения, в то время как необдуманное применение impure пайпов может стать узким местом производительности.