使用滚动事件时的 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：ExpressionChangedAfterItHasBeenCheckedError when using scroll event使用滚动事件时的 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2020-12-16 18:53:17
【问题描述】：

在我的网站中，当用户在页面中滚动时，徽标会旋转。

代码很基础：

组件

@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)'.

如何更新上述代码以避免出现此错误？

感谢您的支持

【问题讨论】：

标签： angular universal angular11

【解决方案1】：

您通常应该避免从 @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)' }" />

【讨论】：

看起来很有魅力，谢谢你，迈克！