Перейти к содержанию

Понимание пайпов

📅 1.04.2022

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

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

Пайпы — это простые функции, используемые в шаблонных выражениях для приема входного значения и возврата преобразованного значения. Пайпы полезны тем, что вы можете использовать их во всем приложении, объявляя каждый пайп только один раз. Например, вы можете использовать пайп для отображения даты как April 15, 1988, а не в формате необработанной строки.

Пример приложения, используемого в этой теме.

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

Angular предоставляет встроенные пайпы для типичных преобразований данных, включая преобразования для интернационализации (i18n), которые используют информацию о локали для форматирования данных. Ниже перечислены часто используемые встроенные пайпы для форматирования данных:

  • DatePipe: Форматирует значение даты в соответствии с правилами локали.
  • UpperCasePipe: Преобразовывает текст в верхний регистр.
  • LowerCasePipe: Преобразование текста во все строчные регистры.
  • CurrencyPipe: Преобразует число в строку валюты, отформатированную в соответствии с правилами локали.
  • DecimalPipe: Преобразует число в строку с десятичной точкой, отформатированную в соответствии с правилами локали.
  • PercentPipe: Преобразует число в строку с процентами, отформатированную в соответствии с правилами локали.

Создавайте пайпы для инкапсуляции пользовательских преобразований и используйте свои пайпы в выражениях шаблонов.

Пайпы и старшинство

Оператор pipe имеет более высокий приоритет, чем тернарный оператор (?:), что означает, что a ? b : c | x будет разобрано как a ? b : (c | x). Оператор pipe нельзя использовать без круглых скобок в первом и втором операндах ?:.

В силу старшинства, если вы хотите, чтобы оператор pipe применялся к результату троичного оператора, оберните все выражение в круглые скобки; например, (a ? b : c) | x.

1
2
3
<!-- use parentheses in the third operand
     so the pipe applies to the whole expression -->
{{ (true ? 'true' : 'false') | uppercase }}

Ссылки

Комментарии