FakeAsync/tick (Async/whenStable) 与 detectorChanges()

您能帮我区分这两件事吗？

根据我的理解，如果你只使用 observable，你可以使用 detectorChanges()。因此，您可以直接更改组件属性或监视服务调用并返回可观察的值，然后调用 detectorChanges()，更改将在 html 元素上可用。

但对于输入字段上的 [(ngModel)]，您需要调用 tick() 才能在 html 元素上呈现更改。

因此，如果我知道它们做什么以及何时使用什么，那就太好了。

提前致谢。

检测变化

方法detectChanges可以在ViewRef https://angular.io/api/core/ViewRef.

class ViewRef extends ChangeDetectorRef {
  // inherited from core/ChangeDetectorRef
  markForCheck(): void   <-----------------------------
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

ViewRef是组件的底层表示。当编写测试而不是ViewRef引入了另一个抽象，即fixture:

fixture = TestBed.createComponent(BannerComponent);

它包装的组件类似于ViewRef.

detectChanges方法对底层组件运行更改检测并执行以下操作：

• 更新输入绑定属性
• 更新 DOM

还有许多其他人。

要了解更多信息，您可以阅读关于 Angular 中的变更检测您需要了解的一切 https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f。因此，为了验证 DOM 中的更改或验证输入绑定，您需要运行detectChanges.

tick

角度文档 https://angular.io/guide/testing#the-tick-function描述得很好：

tick 函数是 Angular 测试实用程序之一，也是 fakeAsync 的伴侣。您只能在 fakeAsync 主体内调用它。

调用tick()模拟时间的流逝，直到所有pending 异步活动完成，包括解决 在此测试用例中 getQuote 承诺。

With ngModel您需要调用它，因为在内部创建的控件ngModel是异步注册的。这是引用自Victor Savkin 关于表单的文章 https://blog.nrwl.io/angular-forms-in-depth-ecb7c58166b5#23b6:

为了使其工作，NgModel 不会同步添加表单控件 — 它 在微任务中完成它。在上面的示例中，三个 ngModel 将 安排三个微任务来添加演讲者、标题和 highRating 控制。