Объединение конвейеров и передача параметров
Объединяйте конвейеры и передавайте аргументы.
«Объединение конвейеров и передача параметров» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Передача аргументов в каналы
Каналы могут принимать аргументы после двоеточия. Формат записи: {{ value | pipeName:arg1:arg2 }}. Каждый аргумент отделяется собственным двоеточием.
Один аргумент
Многие каналы принимают один аргумент. Например, канал date принимает строку формата.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Несколько аргументов
Канал slice принимает начальный и конечный индексы, каждый из которых передаётся после собственного двоеточия.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Динамические аргументы
Аргументами могут быть свойства компонента, а не только литералы. Это позволяет реактивно изменять поведение канала.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;Что такое цепочка каналов
Каналы можно объединять в цепочку: результат одного канала становится входным значением следующего. Они выполняются слева направо.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Пример цепочки
В этом примере дата форматируется, а затем преобразуется в верхний регистр. Сначала выполняется канал date, затем uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->Порядок имеет значение
Порядок каналов в цепочке изменяет результат. В данном случае применение uppercase до slice и после него даёт один и тот же текст, но для преобразующих каналов порядок может иметь большое значение.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Объединение аргументов и цепочек
Вы можете свободно сочетать аргументы и цепочки. При этом каждый канал по-прежнему получает результат предыдущего канала в качестве значения.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Цепочка с валютой
Сначала отформатируйте число как денежную сумму, а затем удалите лишние пробелы. Хотя такой пример необычен, он показывает, что каналы можно комбинировать как строительные блоки.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Советы по читаемости
Длинные цепочки каналов могут ухудшать читаемость. Если цепочка становится сложной, рассмотрите возможность вычислять значение в компоненте или использовать вместо неё пользовательский канал.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Пробелы вокруг каналов
Пробелы вокруг | и : необязательны, но рекомендуются для удобства чтения. Angular игнорирует лишние пробелы.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Быстрая проверка
Проверьте, насколько хорошо Вы понимаете аргументы и цепочки каналов.
Итоги
Вы научились передавать один и несколько аргументов с помощью двоеточий, использовать динамические аргументы из свойств компонента и объединять каналы в цепочку, чтобы результат передавался слева направо.
Далее Вы создадите собственный пользовательский канал.
Часто задаваемые вопросы
Урок «Объединение конвейеров и передача параметров» бесплатный?
Да — полный текст урока «Объединение конвейеров и передача параметров» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Объединение конвейеров и передача параметров»?
Объединяйте конвейеры и передавайте аргументы. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Объединение конвейеров и передача параметров»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Использование встроенных конвейеров
- Объединение конвейеров и передача параметров
- Создание пользовательских конвейеров
- Чистые и нечистые конвейеры