Javascript Angular2 测试：ComponentFixture 中的 DebugElement 和 NativeElement 对象有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37705599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 testing: What's the difference between a DebugElement and a NativeElement object in a ComponentFixture?
提问by dgkane
I'm currently putting together some best practices for testing Angular 2 apps on a component level.
我目前正在整理一些在组件级别测试 Angular 2 应用程序的最佳实践。
I've seen a few tutorials query a fixture's NativeElement object for selectors and the like, e.g.
我看过一些教程查询夹具的 NativeElement 对象以获取选择器等，例如
it('should render "Hello World!" after click', async(() => {
builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
fixture.detectChanges();
let el = fixture.nativeElement;
el.querySelector('h1').click();
fixture.detectChanges();
expect(el.querySelector('h1')).toHaveText('Hello World!');
});
}));However, in juliemr's Angular 2 test seedshe accesses the NativeElement through a parent DebugElement object.
但是，在juliemr 的 Angular 2 测试种子中，她通过父 DebugElement 对象访问 NativeElement。
it('should render "Hello World!" after click', async(() => {
builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
compiled.querySelector('h1').click();
fixture.detectChanges();
expect(compiled.querySelector('h1')).toHaveText('Hello World!');
});
}));Are there any specific cases you'd use a fixture's debugElement.nativeElement over its nativeElement?
是否有任何特定情况下您会在其 nativeElement 上使用装置的 debugElement.nativeElement？
采纳答案by Günter Z?chbauer
nativeElementreturns a reference to the DOM elementDebugElementis an Angular2 class that contains all kinds of references and methods relevant to investigate an element or component (See the source of DebugNode and DebugElement
nativeElement返回对 DOM 元素的引用DebugElement是一个 Angular2 类，其中包含与调查元素或组件相关的各种引用和方法（请参阅DebugNode 和 DebugElement
回答by candidJ
to add on to what has been mentioned already :
补充已经提到的内容：
abstract class ComponentFixture {
debugElement; // test helper
componentInstance; // access properties and methods
nativeElement; // access DOM
detectChanges(); // trigger component change detection
}
来源：https: //github.com/angular/angular/blob/a7e9bc97f6a19a2b47b962bd021cb91346a44baa/modules/angular2/src/testing/test_component_builder.ts#L31
回答by Wojciech Kwiatek
Take a look at Angular discussion about this topicand related PR.
看看关于这个话题和相关PR 的Angular 讨论。
Mainly:
主要是：
fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;
回答by Abhishek
.nativeElement()returns DOM tree whereas debugElementreturns a JS object (debugElement tree). debugElementis a Angular's method.
.nativeElement()返回 DOM 树，而debugElement返回一个 JS 对象（debugElement 树）。debugElement是 Angular 的方法。
.nativeElement()is Browser specific API that returns or give access to DOM tree. But what if application is running on non-browser platform (such as server or web-worker), in that case .nativeElement()may throw error.
.nativeElement()是浏览器特定的 API，它返回或允许访问 DOM 树。但是如果应用程序运行在非浏览器平台（例如服务器或网络工作者）上，在这种情况下.nativeElement()可能会引发错误。
If we are sure that our application will run on browser only, then unhesitantly we can use
let el = fixture.nativeElement. But if we are not sure about the platform then to be on safer side uselet le = fixture.debugElementbecause it returns a plain JS Object.
如果我们确定我们的应用程序只能在浏览器上运行，那么我们可以毫不犹豫地使用
let el = fixture.nativeElement. 但是如果我们不确定平台，那么为了更安全的使用，let le = fixture.debugElement因为它返回一个普通的 JS 对象。
