Angular. Functions & getters в шаблонах

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

Применение ChangeDetectionStrategy.OnPush позволяет локализовать проблему на уровне компонента, но не избавится от неё.

Решение

Есть 2 способа.

  1. Результат функции присвоить свойству компонента
  2. Использовать pure pipe (в случае чистых функций можно быть уверенным, что результат не изменился).

Более подробно про pure pipe в материале Faster Angular Applications - Part 2. Pure Pipes, Pure Functions and Memoization или его видеоверсии

Важное замечание

Проблемы с производительностью возникает на большом количестве элементов (несколько тысяч) или на частых перерисовках (realtime графики). Поэтому в большинстве случаев использование методов и getter'ов является адекватным решением.

Небольшое обсуждение такого замечания в twitter


Похожие записи

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

@Attribute() декоратор

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

15 сентября 2019 г. в Angular

Angular. Manually retry http request

На память. Некоторое время назад я решил достаточно необычную задачу, но в последствии на backend`е переделали логику и код был удалён из проекта.