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

Например:

Здесь канал firstName будет принимать полное имя в качестве входных данных и преобразовывать его в имя. Его можно использовать как в html, так и в ts файле, как показано ниже.

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


Несколько параметров в канале

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

> ng g pipe user-string --standalone --flat --skip-tests

Здесь для канала userString требуются три параметра. Параметры должны быть указаны в выражении шаблона, как показано выше.


Крючки жизненного цикла в трубе

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


Чистые и нечистые трубы

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

Итак, почему существуют нечистые трубы?

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

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

Одним из решений для этого является создание нового экземпляра массива всякий раз, когда добавляется новый пользователь. то есть users = [...users, newUser]

Или вы можете использовать нечистую трубу

Нечистая трубка не запоминается. Он оценивается в каждом цикле обнаружения изменений независимо от его входного значения.

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

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

Следуй за мной на Середина или Dev, чтобы узнать больше об Angular