Angular 2 个生命周期挂钩、变更检测和 ngZone

Question

我有一个 Angular 应用程序，用户按下按钮并触发动画。基本上它是两张图片相互切换以创建运行幻觉。

一开始我的角色是静止的然后当我们开始玩的时候，它的图片是动画的，但是随着它的动画我得到：

ExpressionChangedAfterItHasBeenCheckedError

我的html:

<img [src]="isPlaying == false ? 'https://i.ibb.co/LgqQqFn/dino-1.png' : run()"/>

<button (click)="play()">Run</button>

我的 Ts：

  isPlaying: boolean = false;
  rightFoot: boolean = true;

  play() {        
    this.isPlaying = !this.isPlaying
    setInterval(() => {this.run()}, 200);
  }

  run() {       
    this.rightFoot = !this.rightFoot;
    if (this.rightFoot == false) {
      return 'https://i.ibb.co/JtQm93b/dino-3.png';
    } else {
      return 'https://i.ibb.co/x3JdgFf/dino-4.png';
    }
  }
}

我的错误代码：

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'src': 'https://i.ibb.co/JtQm93b/dino-3.png'. Current value: 'https://i.ibb.co/x3JdgFf/dino-4.png'..

我知道它与变化检测有关。我已阅读有关 ngZone 的文档，它如何使用 setInterval() 跟踪更改，我将其添加到我的代码中但没有成功：

play() {    
    this.isPlaying = !this.isPlaying
    this.ngZone.run(() => {
      setInterval(() => {this.run()}, 200);})
  }

这是我的问题 a working StackBlitz。我应该如何实施 ngZone 才能不再获得 ExpressionChangedAfterItHasBeenCheckedError？

Answer 1

发生这种情况是因为运行方法试图在相同的更改检测周期中更改图像路径。它是从模板和组件调用的：

我已经修改了你的代码来解决这个问题，请检查下面的 stackblitz:

https://stackblitz.com/edit/angular-ivy-rupneh?file=src/app/app.component.ts

Angular 2 个生命周期挂钩、变更检测和 ngZone

Angular 2 Lifecycle Hooks, change detection and ngZone

angular

angular2-changedetection

ngzone