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

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

Но почему? Что отвечает за такое поведение?

Ответ кроется в механизме обнаружения угловых изменений. По сути, метод вызывается после ngDoCheck хука, который напрямую связан с каждым циклом обнаружения изменений. Я знаю, что журналы могут предполагать, что это происходит после перехвата, а именно ngAfterContentChecked и ngAfterViewChecked, но это также зависит от DoCheck, как указано в официальной документации Angular.

Последствия и влияние

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

Итак, какая альтернатива?

Мы хотим, чтобы наша функция вызывалась только при изменении любого из переданных аргументов. Что-то щелкнуло!
Да, это чистые угловые трубы. Он работает точно так же. Он наблюдает за изменением значения в неизменяемых типах и за изменением ссылки в случае объектов.
Итак, круто, давайте приступим к его реализации.

Решение

Мы собираемся создать pure pipe, который находится в функции и принимает контекст, аргументы функции в качестве параметров.

Предположим, у вас есть функция с именем getErrorMessage в вашем компоненте, отвечающая за получение некоторого сообщения на основе flag и пользователя role. Вот как это можно использовать:

{{getErrorMessage | execute:this:flag:role}}

Чтобы объяснить вам концепцию и ее применение, я дал вам этот простой пример использования, но вы можете использовать его для привязки любых свойств и функций. Только будьте осторожны: он будет выполнен только в том случае, если увидит какие-либо изменения в предоставленных аргументах.

Заключительные слова…

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