Понимание встроенных каналов, создание пользовательских каналов и фильтров в Angular

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

Мы можем преобразовывать строки, суммы в валюте, даты и другие данные для отображения. Каналы — это простые функции, которые можно использовать в выражениях шаблона, чтобы принимать входное значение и возвращать преобразованное значение.

Мы можем использовать встроенные каналы, а также можем создавать собственные каналы.

Встроенные трубы

Некоторые из встроенных труб включают в себя:

  • uppercase(для преобразования строки в верхний регистр)
  • lowercase(для преобразования строки в верхний регистр)
  • date(для форматирования даты в разные типы)
  • Async (подписывается на Observable или Promise и возвращает последнее сгенерированное значение)

Давайте разберем их на примере:

<p>{{ userName | uppercase }}</p>
<p>{{ userCountry | lowercase }}</p>

Все, что нам нужно сделать, это написать символ вертикальной черты | за которым следует имя канала, используемого в верхнем или нижнем регистре.

Здесь userName и userCountry — это свойства, определенные в угловом компоненте и содержащие некоторые данные.

Скажем, имя_пользователя содержит -› test user, оно будет преобразовано в -› TEST USER, поскольку труба в верхнем регистре используется, хотя свойство, содержащее данные остается незатронутым.

Аналогично, скажем, что userCountry содержит -› India, оно будет преобразовано в -› india, так как используется строчная вертикальная черта.

Канал даты используется для форматирования значения даты. Каналы, такие как дата, валюта, будут принимать аргументы для функции канала, для передачи аргумента следует имя канала (date) с двоеточием (:) и значение параметра (‘fullDate’). Чтобы проверить все аргументы, обратитесь к Angular docs.

Например:

<p>{{ loginDateTime | date: 'fullDate' }}</p>

Будет выведена отформатированная дата, например: Суббота, 28 мая 2022 г., а не отметка времени.

Цепочка из нескольких труб

Чтобы связать несколько каналов вместе, нам просто нужно использовать оператор канала (|) между разными именами каналов, например, см. приведенный ниже код.

<p>{{ loginDateTime | date | uppercase}}</p>

Он выведет отформатированную дату, за которой следует все в верхнем регистре, например:

СУББОТА, 28 МАЯ 2022 Г.

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

Мы также можем создавать собственные каналы с пользовательской логикой преобразования. Используйте команду ng g p ‹name_of_pipe›, скажем, мы создаем пользовательский канал, который обрезает данные до определенного предела, а затем добавляет … в конце, если значение превышает этот предел.

Начните с запуска ng g p trim в терминале:

Это создаст trim.pipe.ts, а также объявит его в массиве объявлений app.module.ts. Он примет значение и, учитывая аргумент limit и длину значения, решит, следует ли возвращать значение напрямую или возвращать нарезанное значение, за которым следуют … символы.

Он реализует интерфейс PipeTransform для выполнения преобразования. Angular вызывает метод transform со значением привязки в качестве первого аргумента и любыми параметрами в качестве второго аргумента в форме списка.

Мы также определяем декоратор @Pipe, который помечает класс как канал и предоставляет метаданные конфигурации. Имя канала используется в привязках шаблонов напрямую, записывая символ канала | затем следует отделка данных.

Фильтрующая труба в угловом исполнении

Помимо преобразования наших данных, мы также можем использовать каналы для фильтрации наших данных в Angular с помощью каналов фильтра.

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

Каждый продукт питания представляет собой объект с именем и свойством категории. Мы добавим фильтр поиска, чтобы фильтровать наш список продуктов питания и возвращать продукты, соответствующие категории, указанной в поле ввода.

У нас также будет кнопка «Добавить еду», чтобы добавить предопределенный продукт питания в категорию нездоровой пищи.

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

Давайте посмотрим, как это реализовать:

Начните с запуска ng g p filter в вашем терминале. Это создаст filter.pipe.ts и добавит его в массив объявлений в app.module.ts.

Как объяснялось выше, класс FilterPipe реализует интерфейс PipeTransform для выполнения преобразования или фильтрации данных. Angular вызывает метод transform со значением привязки в качестве первого аргумента, который будет здесь массивом продуктов питания, и любыми параметрами в качестве второго аргумента.

Мы также определяем декоратор @Pipe, который помечает класс как канал и предоставляет метаданные конфигурации. Имя канала используется в привязках шаблонов напрямую, записывая символ канала | за которым следует имя трубы — здесь фильтр.

чистое свойство истинно по умолчанию. Когда значение равно true, канал является чистым, что означает, что метод transform() вызывается только при изменении его входных аргументов, а не данных. Итак, если я запустил канал фильтра, скажем, набрав мусор во входных данных, и на этом этапе, если мы переместим больше данных, принадлежащих категории нежелательной почты, в массив продуктов питания, это не отразится в результате.

Следовательно, я предоставил чистое свойство как false, что может повлиять на нашу производительность, но наша логика конвейера фильтра будет запускаться при изменении наших входных аргументов или изменении данных.

Наконец, добавьте этот канал фильтра в наш HTML-шаблон.