1

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

代码非常基本：

零件

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

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

谢谢您的支持

4

1 回答 1

0

你通常应该避免返回东西，@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)' }" />
于 2020-12-16T10:53:17.990 回答