Не следует использовать методы в HTML, если они не связаны с событиями:

Проблема многократного выполнения. В этом примере отображается массив, который будет выполняться 16 раз. Точно так же нам не следует напрямую использовать запросы get или API.

Это можно решить с помощью канала и/или создания собственного канала, который будет выполняться только один раз для каждого пользователя. В этом примере канал имеет метод преобразования, который получает те же аргументы, что и ранее использованный метод:

Объяснение:

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

Напротив, канал является нативным, чистым и выполняется только при изменении его аргументов. Кроме того, канал можно повторно использовать в разных частях приложения (в отличие от метода, который можно повторно использовать только путем отправки его в службу).

Мы можем создать канал, если он не существует, указав его целевое местоположение:

ng g p Pipes/fullName (где Pipes/FullName — это местоположение).

Канал создается как класс, реализующий PipeTransform, интерфейс, который требует от нас наличия метода преобразования. Этот метод выполняется при запуске канала и работает так же, как обычный метод. Чтобы использовать созданный канал, мы должны импортировать его в компонент приложения (автономный):

При использовании его в HTML мы называем его по имени, указанному в поле имени канала, используя символ «|», за которым следует имя канала. Первый аргумент передается слева, а если мы хотим передать другие аргументы, они передаются справа, после двоеточия ‘:’:

Запомните хорошие практики: если аргументов много, лучше использовать объект. Хорошей практикой является стараться не злоупотреблять трубами, чтобы не загромождать их. Разберите код, и у вас все получится.

Чтобы создать содержимое канала, мы указываем аргументы, которые хотим получить, и тип возвращаемого значения в методе преобразования. Затем мы пишем содержимое и возвращаем результат. Необязательные значения можно получить, добавив к ним префикс «?», а значения по умолчанию можно назначить с помощью «=".

— Заметки на основе курса EfisioDev по Angular —