FakeAsync/tick(Async/whenStable)vs detectChanges()

Question

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

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

但是对于输入字段中的[(ngModel)],您需要调用tick()以便在html元素上呈现更改.

如果我知道他们做什么以及何时使用什么,我会很高兴.

提前致谢.

Answer 1

detectChanges

该方法detectChanges可在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中变更检测的所有信息.因此,为了验证DOM中的更改或验证您需要运行的输入绑定detectChanges.

蜱

Angular docs很好地描述了它:

tick函数是Angular测试实用程序之一,也是fakeAsync的伴侣.你只能在fakeAsync体内调用它.

调用tick()模拟所有挂起的异步活动完成之前的时间流逝,包括此测试用例中getQuote promise的解析.

有了ngModel你需要调用它,因为那是内部创建的控制ngModel是asynchonously注册.以下是Victor Savkin关于表格的文章的引用:

为了使它工作,NgModel不会同步添加表单控件 - 它在微任务中执行.在上面的示例中,三个ngModel将安排三个微任务来添加扬声器,标题和highRating控件.