В этой статье мы узнаем, как создавать собственные каналы. Как мы знаем, angular предоставляет 2 типа труб: Встроенные трубы и Пользовательские трубы.
Почему трубы?
Каналы позволяют нам форматировать значения в представлении шаблонов перед их отображением.
Определение труб
Оператор канала определяется символом канала (|), за которым следует имя канала:
Ниже приведен пример простого встроенного канала в верхнем регистре:
Приступим к созданию наших пользовательских каналов
Теперь, когда мы знаем основы труб, мы готовы создавать наши собственные Пользовательские каналы :)
Шаг 1. Сначала мы должны создать наш компонент, который называется AppComponent.ts, он выглядит следующим образом
Например: у нас есть список authorDetails
Шаг 2. На этом шаге нам нужно создать файл custom.pipe.ts, например
После этого вам нужно импортировать Pipe и PipeTransform из модуля @ angular / core, тогда вам нужно использовать декоратор @Pipe с именем канала.
Шаг 3. Нам нужно объявить наш класс CustomAuthorPipes в app.module.
Шаг 4. В файле app.component.html мы можем применить наш настраиваемый канал, используя имя канала, которым является authorPipeName.
Шаг 5: На последнем шаге мы видим волшебный префикс, состоящий только из мужского имени автора с г-ном и женского имени автора с мисс.
Резюме :
Пользовательские каналы - это класс, который украшен @Pipe
Свойство Name декоратора @Pipe определяет имя канала
Классы каналов должны реализовывать интерфейс преобразования труб
Спасибо за чтение !!!
Если у вас есть вопросы, не стесняйтесь оставлять комментарии!
