Создание пользовательских конвейеров
Создавайте повторно используемые конвейеры преобразования.
«Создание пользовательских конвейеров» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Зачем нужны пользовательские каналы
Когда встроенных каналов недостаточно, Вы можете создать пользовательский канал, чтобы инкапсулировать повторно используемую логику преобразования для шаблонов.
Декоратор @Pipe
Канал — это класс, декорированный с помощью @Pipe. Свойство name — это имя, которое используется в шаблонах.
import { Pipe } from "@angular/core";
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}Реализация PipeTransform
Класс канала реализует интерфейс PipeTransform, который требует наличия одного метода transform.
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string): string {
return value + "!";
}
}Метод transform
Первый параметр метода transform — это значение, переданное в канал. Всё, что Вы вернёте, станет отображаемым результатом.
transform(value: string): string {
return value.trim();
}Использование собственного канала
Импортируйте канал в автономный компонент, а затем используйте его имя в шаблоне так же, как имя встроенного канала.
@Component({
selector: "app-demo",
standalone: true,
imports: [ExclaimPipe],
template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!Приём аргументов
Дополнительные параметры после value становятся аргументами канала. Вызывающий код передаёт их через двоеточия.
@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
transform(value: string, times: number): string {
return value.repeat(times);
}
}
// {{ "ab" | repeat:3 }} -> abababЗначения аргументов по умолчанию
Задавайте аргументам значения по умолчанию, чтобы вызывающий код мог их не указывать. Это делает канал более гибким.
transform(value: string, times: number = 2): string {
return value.repeat(times);
}
// {{ "ab" | repeat }} -> ababОбработка null и undefined
Всегда предусматривайте отсутствие входного значения. Если значение равно null или undefined, возвращайте подходящий запасной вариант.
transform(value: string | null): string {
if (value == null) return "";
return value.toUpperCase();
}Пример канала Truncate
Перед Вами практический канал, который сокращает длинный текст и добавляет многоточие.
@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number = 20): string {
if (!value) return "";
return value.length > limit
? value.slice(0, limit) + "..."
: value;
}
}Типизация возвращаемого значения
Указывайте тип возвращаемого значения, чтобы TypeScript и шаблоны сохраняли типобезопасность. Канал может возвращать любой тип, а не только строки.
@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
transform(value: number): number {
return value * 2;
}
}Регистрация в модуле (NgModule)
Если вместо автономных компонентов Вы используете NgModules, объявите канал в declarations и экспортируйте его, если это необходимо.
@NgModule({
declarations: [TruncatePipe],
exports: [TruncatePipe]
})
export class SharedModule {}Быстрая проверка
Проверьте, насколько хорошо Вы понимаете пользовательские каналы.
Итоги
Вы создали пользовательский канал с помощью @Pipe и PipeTransform, добавили аргументы со значениями по умолчанию, предусмотрели обработку null и зарегистрировали канал в автономных компонентах или NgModules.
Далее Вы узнаете о чистых и нечистых каналах.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 38
- Уроки
- 144
Часто задаваемые вопросы
Урок «Создание пользовательских конвейеров» бесплатный?
Да — полный текст урока «Создание пользовательских конвейеров» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание пользовательских конвейеров»?
Создавайте повторно используемые конвейеры преобразования. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Создание пользовательских конвейеров»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Использование встроенных конвейеров
- Объединение конвейеров и передача параметров
- Создание пользовательских конвейеров
- Чистые и нечистые конвейеры