Ответ
Pipes в Angular — это инструменты для трансформации данных прямо в шаблоне. Они позволяют форматировать значения (даты, строки, числа и т.д.) без изменения исходных данных.
Пример использования:
<p>{{ today | date:'fullDate' }}</p>
<p>{{ price | currency:'EUR' }}</p>
<p>{{ text | uppercase }}</p>Типы Pipes:
- Встроенные (
date,currency,uppercaseи др.) - Кастомные (создаются разработчиком через
@Pipe)
Чистые (pure) и нечистые (impure) pipes
Чистые обновляются только при изменении входного значения или ссылки (для объектов). Нечистые — при каждом изменении детекта (могут снижать производительность).
Создание кастомного Pipe:
@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}Ответ 18+ 🔞
А, слушай, вот эти ваши Pipes в Angular, ну просто пиздец как удобная штука, ей-богу! Это ж как волшебная палочка для данных в шаблоне — взял значение, чих-пых, и на выходе уже красиво и по-человечески.
Смотри, как это выглядит, простейший пример:
<p>{{ today | date:'fullDate' }}</p>
<p>{{ price | currency:'EUR' }}</p>
<p>{{ text | uppercase }}</p>Видишь? Не надо никаких лишних телодвижений в компоненте. Взял дату — отформатировал, взял цену — добавил значок евро, взял текст — сделал заглавными буквами. Исходные данные при этом, блядь, не портятся, всё чисто.
А какие они бывают, эти самые Pipes?
- Встроенные — их Angular уже тебе в рот положил, жуй не хочу:
date,currency,uppercase,lowercaseи куча других. Бери и пользуйся, не изобретай велосипед. - Кастомные — вот тут уже можно проявить свою, блядь, гениальность. Сам пишешь через
@Pipe, если стандартных не хватает. Хочешь строку задом наперёд, хочешь маскировку номера телефона — твори, что душе угодно.
А вот тут, внимание, важный момент, ёпта! Чистые и нечистые pipes.
Чистые (pure) — они умные, ленивые. Обновятся только если входное значение реально поменялось (для примитивов) или ссылка на объект другая. Экономят ресурсы, молодцы.
Нечистые (impure) — это такие паникёры, сука. Трясутся и пересчитываются при каждой, блядь, проверке изменений, даже если всё по-старому. С ними осторожно — можно такую производительность угробить, что мало не покажется. Используй только когда без них реально никак.
Ну и как свой собственный Pipe сварганить? Да элементарно!
@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}Вот и весь сказ! Объявил класс, реализовал один метод transform, и теперь в шаблоне пишешь {{ 'Привет' | reverse }} и получаешь «тевирП». Красота, блядь! Главное — головой думай, где стандартных хватает, а где свой городить, и не увлекайся нечистыми, а то будет тебе овердохуища проблем с производительностью.