Блог

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

Код очень простой :

Компонент

 @HostListener('window:scroll', ['$event'])
scrollPos(){
  if (typeof window !== 'undefined') {
    return Math.round(window.scrollY);
  }
}
 

HTML

 <img src="assets/logo.svg" [ngStyle]="{ transform: 'rotate('   scrollPos()   'deg)' }" />
 

Однако иногда этот базовый код генерирует эту ошибку при навигации по веб-сайту : (

  ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it 
 was checked. Previous value: 'rotate(397deg)'. Current value: 'rotate(331deg)'.
 

Как я могу обновить приведенные выше коды, чтобы избежать этой ошибки?

спасибо за вашу поддержку

Обычно вам следует избегать возврата вещей, @HostListeners потому что … они не должны вызываться ничем, кроме событий, которые они прослушивают;

Вместо этого назначьте window.scrollY свойству в вашем компоненте и получите к нему доступ из вашего компонента;

 public wScrollY: number = 0;

@HostListener('window:scroll', ['$event'])
scrollPos(){
  if (typeof window !== 'undefined') {
    this.wScrollY = Math.round(window.scrollY);
  }
}
 

Шаблон

 <img src="assets/logo.svg" [ngStyle]="{ transform: 'rotate('   wScrollY   'deg)' }" />