Я работаю над проектом Angular 8 и столкнулся с проблемой производительности в changeDetection. Для событий в дочерних компонентах Angular запускает обнаружение изменений для родительского компонента, которые вызывают проблемы с производительностью.
Здесь минимальное воспроизведение моей проблемы. У меня есть контейнер с элементами.
<p> elements: </p>
<div *ngFor="let el of element_list(); trackBy: trackByConstant">
<app-element [text]="el"></app-element>
</div>
<div>{{element_list() | json}} </div>
<app-element [text]="'lorem ipsium'"></app-element>
В app-element Я связываю события mouseenter и mouseleave для выделения элементов (в реальном проекте есть более сложные логи c).
В обоих компонентах установлена стратегия changeDetection OnPush
Когда события запускаются в app-element (в * ngFor и вне его) Angular дважды вызывает element_list. Это означает, что Angular запускает обнаружение изменений для родительского компонента.
Почему Angular запускает обнаружение изменений для родительского компонента? Я обнаружил, что я могу это исправить с помощью addEventListener. Но это довольно неудобный способ. Есть ли способ остановить такое поведение Angular?
Есть рабочий пример: https://stackblitz.com/edit/angular-cog2f5