ЧТО ТАКОЕ ТРУБЫ???

Pipes — это функция, встроенная в Angular 2, которая позволяет вам преобразовывать выходные данные в вашем шаблоне.

Пример: у вас есть свойство username=’deepa’

Вы хотите, чтобы ваше имя было только в верхнем регистре при выводе в шаблон

  • Вы не хотите изменять свойство в вашем машинописном (ts) файле.
  • Вы хотите изменить то, как оно отображается на экране.

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

Так:

Теперь ваше имя пользователя будет отображаться как «DEEPA» в выводе.

Параметризация труб

Предположим, у вас есть дата в формате «8 апреля 2022 года».

Вам не нужен этот формат, вы хотите настроить его в соответствии с вашими требованиями

Это можно сделать с помощью параметризованных каналов

В файле ts вы определите студентов объекта следующим образом:

Теперь в ваш html-файл вы добавите параметризованный канал следующим образом:

здесь «|date:’fullDate’» представляет собой параметризованный канал.

Вывод будет выглядеть следующим образом

вы можете обратиться https://angular.io/api/common/DatePipe для более подробной информации

Объединение нескольких каналов в цепочку

Здесь порядок, в котором мы пишем конвейер, имеет значение, потому что он повторяется слева направо

  1. Будет применена первая полная дата
  2. В результате (т. е. в понедельник, 12 апреля 2022 г.) в верхнем регистре будет применено число 3. И оно станет «ПОНЕДЕЛЬНИК, 12 АПРЕЛЯ 2022 г.».

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

  1. Сначала создайте файл ts pipename.ts

Теперь ваш pipe.ts должен выглядеть так:

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

  • Он реализует интерфейс PipeTransform, что очень важно.
  • Метод преобразования является обязательным в вашем канале, и вся логика будет выполняться только внутри этого метода.
  • @Pipe({name:"youpipename"})важно, иначе это вызовет ошибку.

Вот мое небольшое объяснение о каналах в Angular
Если вам это нравится, поставьте лайк и прокомментируйте