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

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

Использование каналов помогает сохранить код чистым и читабельным. Вместо написания сложной логики в шаблонах или компонентах вы можете инкапсулировать эту логику в конвейер, который затем можно повторно использовать в разных частях вашего приложения.
Например, если вы разрабатываете блог-платформу, где пользователи могут видеть дату публикации статей. Даты должны отображаться в удобном для пользователя формате, например «31 августа 2024 г.», а не в необработанном формате «2024–08–31T14:48:00.000Z». С помощью pipes вы можете использовать встроенный в Angular DatePipe в шаблоне вместо того, чтобы вручную форматировать дату в компоненте, загромождая код и ухудшая читабельность.

Published on: {{ article.publishDate | date:'longDate' }}

Чтобы применить канал, используйте оператор pipe (|) в выражении шаблона, как показано в приведенном выше примере кода.

Встроенные трубы

Angular поставляется с несколькими встроенными каналами, которые решают общие задачи (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, и т. д.). Знание того, как их использовать, может сделать ваш код чище и эффективнее.

Примеры:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

Цена: {{ product.price | валюта: 'USD' }}

{{ имя пользователя | верхний регистр }}

Параметризованные трубы

Многие каналы Angular принимают параметры для настройки своего поведения.

Чтобы указать параметр, после имени канала следует поставить двоеточие (:) и значение параметра

Некоторые каналы принимают несколько параметров, которые разделяются дополнительными двоеточиями.

Параметры могут быть необязательными или обязательными. Предположим, у вас есть собственный канал, который форматирует валюту и требует указания типа валюты в качестве параметра. Если этот параметр не указан, возможно, канал не сможет правильно отформатировать значение.

The product price is {{ price | customCurrency:'USD' }}

1. DatePipe с параметрами

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

При этом дата форматируется как «31 августа 2024 г., 14:48:00».

2. CurrencyPipe с параметрами

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

Цена форматируется как «1235 евро» (округленная до десятичных знаков).

Соединение труб

Вы можете объединить несколько каналов для выполнения сложных преобразований.

{{ article.content | slice:0:100 | uppercase }}

Это позволит разрезать первые 100 символов article.content и преобразовать их в верхний регистр.

Пользовательские трубы

Иногда встроенные каналы могут не соответствовать вашим конкретным потребностям, и вам потребуется создать собственный канал для обработки конкретной логики. Вот как вы можете это сделать.

Пример:

В следующем примере мы собираемся создать канал, который добавляет приветствие к имени, например «Привет, Алиса!»

Выполните следующую команду, чтобы создать новый канал:

ng generate pipe greet

Теперь давайте изменим файл Greeting.pipe.ts в каталоге src/app, включив в него логику канала:

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

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Как только ваша трубка будет готова, вы сможете использовать ее в своих шаблонах.

{{ 'Alice' | greet }}

Создание параметризованной пользовательской трубы

Теперь мы сделаем приветствие настраиваемым, чтобы вы могли сказать «Привет, Алиса!» или «Добро пожаловать, Алиса!» в зависимости от того, что вы передаете в трубу.

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

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

Метод преобразования теперь имеет второй параметр — приветствие. Если приветствие не указано, по умолчанию используется «Привет».

Теперь вы можете настроить приветствие в своих шаблонах.

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

Чистые и нечистые трубы

1. Чистые трубы
По умолчанию все каналы Angular являются чистыми. чистый канал вызывается только тогда, когда входные данные (например, число или строка) или когда изменяется ссылка на объект (например, массив или дата). Это делает чистые каналы эффективными и производительными, поскольку они не работают без необходимости.

Однако, если ваши данные более сложны, например массив элементов, Angular может не заметить изменений внутри массива (например, добавление нового элемента), поскольку ссылка на массив не изменилась.

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

Пример:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

В вашем шаблоне:

• {{ item.name }} - {{ item.price | formatPrice }}

Если вы добавите новый товар в массив items, который продается, вы можете ожидать, что он появится в списке. Но если вы просто поместите новый элемент в массив, список может не обновиться, поскольку ссылка на массив не изменилась.

2. Загрязненные трубы

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

Пример:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

В вашем шаблоне:

• {{ item.name }} - {{ item.price | formatPrice }}

Теперь, когда вы добавляете новый элемент, канал заметит это изменение и обновит список.

Лучшие практики использования труб

1. Сохраняйте трубы простыми. Избегайте тяжелых вычислений в каналах

2. Называйте трубки четко и описательно

3. Держите Pipes сосредоточенными на одной ответственности

4. По возможности избегайте нечистых труб

5. Тщательно проверяйте нестандартные трубы

Заключение

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