DebugElement 和 DOM 元素之间的区别答案

【问题标题】：Diff between DebugElement and DOM elementDebugElement 和 DOM 元素之间的区别
【发布时间】：2018-11-17 01:32:45
【问题描述】：

在使用 jasmine 的角度单元测试中，我们可以通过两种方式测试视图（html 内容）。

从 DebugElement 中获取元素

fixture.debugElement.queryAll(By.css('.tableData.billStatus.text-center'))
从 DOM 中获取元素。

fixture.debugElement.nativeElement.querySelectorAll('.tableData.billStatus.text-center')

我的问题与queryAll 和querySelectorAll 无关。这是DOM 与DebugElement。因为当我使用它们中的任何一个时，它们大多数时候都会给我正确的结果。

这个问题和这个issue有些关系

他们提供了一种解决方法来查看DOM 元素，而不是DebugElement 作为一种解决方法。那么这两者有什么不同呢？

在提出这个问题之前，我已经查看了几篇帖子的区别。但是我没有找到任何合适的东西。

【问题讨论】：

fixture.debugElement.querySelectorAll('.tableData.billStatus.text-center').nativeElement 你是说这个吧？
你检查过这个链接吗？stackoverflow.com/questions/37705599/…
@NarendraSolanki 是的，我看过那篇文章，但问题是 DebugElement 如何与 DOM 相关。如果 DebugElement 是一个角度类，则不应在内部引用 DOM 元素。如果是这样，那为什么它会给出不同的结果？

【解决方案1】：

debug element 包含对组件或元素的引用和方法，而native element 是对 DOM 元素的引用。

【讨论】：