Что такое пайпы (pipes)? Как создать кастомный пайп?angular-29

Что такое пайпы?

Pipes (пайпы) - это специальные инструменты в Angular для трансформации данных прямо в шаблоне. Они позволяют форматировать или преобразовывать отображаемые значения без изменения исходных данных.

Основные характеристики:

  • Чистые (pure) по умолчанию - Angular кэширует результат
  • Могут принимать параметры
  • Работают в шаблонах через символ |
  • Не изменяют исходные данные

Встроенные пайпы

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

<!-- Дата -->
```{{ today | date:'dd.MM.yyyy' }}```

<!-- Текст -->
```{{ message | uppercase }}```
```{{ longText | truncate:20 }}``` <!-- Предполагая кастомный пайп -->

<!-- Числа -->
```{{ price | currency:'USD':'symbol':'1.2-2' }}```
```{{ percentValue | percent }}```

<!-- JSON (для отладки) -->
```{{ object | json }}```

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

1. Генерация пайпа

ng generate pipe truncate

или вручную:

2. Структура пайпа

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

@Pipe({
  name: 'truncate',
  pure: true // опционально, true по умолчанию
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 50, completeWords: boolean = false, ellipsis: string = '...'): string {
    if (!value) return '';

    if (value.length <= limit) {
      return value;
    }

    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }

    return `${value.substr(0, limit)}${ellipsis}`;
  }
}

3. Регистрация пайпа

Пайп автоматически добавляется в declarations модуля, где был сгенерирован.

4. Использование в шаблоне

```{{ longText | truncate:20:true:'...' }}```

Чистые vs нечистые пайпы

  • Pure (по умолчанию):

    • Angular запускает пайп только при изменении ссылки на объект
    • Оптимально для производительности

  • Impure:

    • Angular запускает пайп при каждой проверке изменений
    • Может снижать производительность
    • Используется редко, когда нужно реагировать на изменения внутри объекта

Пример impure пайпа:

@Pipe({
  name: 'filterArray',
  pure: false
})
export class FilterArrayPipe implements PipeTransform {
  transform(items: any[], filter: string): any {
    if (!items || !filter) return items;
    return items.filter(item => item.name.includes(filter));
  }
}

Пайпы с параметрами

Пайпы могут принимать несколько параметров:

```{{ value | myPipe:param1:param2:param3 }}```

В реализации пайпа:

transform(value: any, param1: any, param2: any, param3: any): any {
  // Логика преобразования
}

Пример сложного пайпа: форматирование номера телефона

@Pipe({ name: 'phoneFormat' })
export class PhoneFormatPipe implements PipeTransform {
  transform(phone: string, countryCode: string = '+7'): string {
    if (!phone) return '';

    const cleaned = phone.replace(/\D/g, '');

    if (cleaned.length === 10) {
      return `${countryCode} (${cleaned.substring(0, 3)}) ${cleaned.substring(3, 6)}-${cleaned.substring(6, 8)}-${cleaned.substring(8)}`;
    }

    return phone;
  }
}

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

```{{ user.phone | phoneFormat:'+7' }}```

Тестирование пайпов

Пример теста для TruncatePipe:

describe('TruncatePipe', () => {
  let pipe: TruncatePipe;

  beforeEach(() => {
    pipe = new TruncatePipe();
  });

  it('should truncate string', () => {
    expect(pipe.transform('1234567890', 5)).toBe('12345...');
  });

  it('should handle empty string', () => {
    expect(pipe.transform('', 5)).toBe('');
  });
});

Резюмируем

  • Pipes - мощный инструмент форматирования данных в шаблонах
  • Angular предоставляет множество встроенных пайпов для распространенных задач
  • Кастомные пайпы создаются через @Pipe декоратор и реализуют PipeTransform
  • Pure пайпы - стандартные, оптимизированы для производительности
  • Impure пайпы - выполняются часто, требуют осторожности
  • Пайпы могут принимать несколько параметров для гибкости
  • Всегда тестируйте свои кастомные пайпы

Вопросы

Собеседования