使用滚动事件时出现 ExpressionChangedAfterItHasBeenCheckedError

Question

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

代码非常基础：

组件

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

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

感谢您的支持

Answer 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)' }" />

使用滚动事件时出现 ExpressionChangedAfterItHasBeenCheckedError

ExpressionChangedAfterItHasBeenCheckedError when using scroll event

angular

universal

angular11