在Angular 5中，“tick”的含义是什么？

Question

我正在学习Angular 5，在学习组件交互部分时，遇到了以下内容

// Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
// but wait a tick first to avoid one-time devMode
// unidirectional-data-flow-violation error
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);

我已经查阅了文档并在网上尝试寻找，但没有关于这个主题的清晰解释。请问有人能够解释一下吗？

1. 这个“tick”是什么？
2. 为什么我们需要它？
3. 什么是单向数据流违规错误？
4. setTimeout如何防止它？
5. 还有其他方法可以预防吗？

- Punit

---

https://dev59.com/N1gR5IYBdhLWcg3wJ6pw - Umesh Kumar Sharma

Answer 1

1) tick指的是将任务（函数执行）添加到浏览器事件队列中，以延迟（异步）执行而不是同步执行。

2) 在执行新代码之前，允许浏览器执行事件队列中的挂起任务。

3) 一些异步执行会更新模型，Angular会识别出异步执行已完成并运行变更检测。变更检测本身会导致模型发生变化（例如在视图绑定中使用的属性或函数修改了模型）。模型只能在某些异步执行期间进行修改，而不能在变更检测期间进行修改。

4) 将代码执行添加到浏览器事件队列中，而不是立即执行它，可以完成变更检测，然后仅在浏览器使用setTimeout执行我们放入队列中的任务时才异步更新模型。

5) 在模型更新后调用ChangeDetectorRef.detectChanges()会强制进行另一个变更检测，通常可以防止错误发生。

- Günter Zöchbauer

Answer 2

2019年Angular指南（angular.io）中有完整的解释：

然后，Angular在ngAfterViewInit生命周期钩子中调用，此时更新父视图的倒计时秒数已经太晚了。 Angular的单向数据流规则防止在同一周期内更新父视图。 应用程序必须等待一个回合才能显示秒数。 使用setTimeout（）等待一个刻度，然后修改seconds（）方法，使其从计时器组件获取未来值。

- Andrey Karpovich