Параметризованные пайпы

Пайпы в Angular представляют собой мощный инструмент для трансформации данных в шаблонах. Они позволяют изменять отображение значений без вмешательства в бизнес-логику компонента. Одним из ключевых возможностей является использование параметров, которые делают пайпы более гибкими и универсальными.

Синтаксис параметров в пайпах

Базовый синтаксис пайпа с параметрами выглядит следующим образом:

{{ value | pipeName:param1:param2:... }}
  • value — исходное значение, которое нужно преобразовать.
  • pipeName — имя пайпа.
  • param1, param2, ... — дополнительные параметры, передаваемые пайпу для управления его поведением.

Пример использования стандартного пайпа date с параметром формата:

{{ today | date:'fullDate' }}

Здесь 'fullDate' — параметр, задающий формат отображения даты. Пайп принимает его в методе transform.

Создание кастомного параметризованного пайпа

Пользовательские пайпы создаются с помощью декоратора @Pipe и реализации интерфейса PipeTransform. Пример кастомного пайпа, который форматирует строку с различными стилями:

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

@Pipe({
  name: 'textFormat'
})
export class TextFormatPipe implements PipeTransform {
  transform(value: string, style: string = 'uppercase'): string {
    switch(style) {
      case 'lowercase':
        return value.toLowerCase();
      case 'capitalize':
        return value.replace(/\b\w/g, char => char.toUpperCase());
      default:
        return value.toUpperCase();
    }
  }
}

Использование этого пайпа в шаблоне:

<p>{{ 'angular framework' | textFormat:'capitalize' }}</p>

Результат будет: Angular Framework.

Множественные параметры

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

Пример пайпа для форматирования чисел с учётом валюты и количества знаков после запятой:

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

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: number, currency: string = 'USD', decimals: number = 2): string {
    return `${value.toFixed(decimals)} ${currency}`;
  }
}

Использование:

<p>{{ 1234.567 | currencyFormat:'EUR':3 }}</p>

Результат: 1234.567 EUR.

Асинхронные данные и параметры

Пайпы могут работать с асинхронными данными, например, с Observable или Promise. Для этого используется встроенный пайп async, который может сочетаться с другими параметризованными пайпами:

<p>{{ userObservable | async | textFormat:'capitalize' }}</p>

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

Рекомендации по использованию параметров

  1. Управление поведением пайпа: Параметры должны четко контролировать поведение пайпа, избегая побочных эффектов.
  2. Значения по умолчанию: При определении метода transform рекомендуется задавать значения параметров по умолчанию, чтобы пайп был устойчив к отсутствию аргументов.
  3. Не использовать для логики бизнес-процессов: Пайпы должны оставаться инструментом отображения, а не вычислений или изменения состояния приложения.
  4. Оптимизация производительности: Для сложных вычислений лучше использовать pure: true (по умолчанию) в декораторе @Pipe, чтобы Angular кэшировал результат и не вызывал пайп при каждом цикле обнаружения изменений.

Передача объектов и массивов как параметров

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

Пример пайпа для фильтрации массива объектов по ключу:

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

@Pipe({
  name: 'filterByKey'
})
export class FilterByKeyPipe implements PipeTransform {
  transform(items: any[], key: string, value: any): any[] {
    if (!items || !key || value === undefined) return items;
    return items.filter(item => item[key] === value);
  }
}

Использование:

<li *ngFor="let user of users | filterByKey:'role':'admin'">
  {{ user.name }}
</li>

Параметризованные пайпы повышают гибкость шаблонов Angular и делают код более декларативным, позволяя концентрироваться на отображении данных без изменения логики компонентов. Грамотное использование параметров упрощает поддержку и расширение интерфейсов.

Оглавление