如何在Angular中访问DOM元素

Question

我正在使用Angular测试模板驱动的表单，只是测试而不进行验证。

我已经阅读到可以使用ViewChild属性来完成此操作，但似乎对我无效。

我在我的表单标签中创建了一个引用，类似于这样：

<label #ref  id=.. class=...>

现在，在我的组件中，我这样做：

@ViewChild('ref') ref:ElementRef;

因此，我假设我创建了一个类型为ElementRef的变量，它是我的input的viewChild。现在我可以在我的测试中使用ref。

在我的测试中，我这样做：

let ref: HTMLElement:

it(....=>
{
ref = fixture.debugElement.query(By.css('ref')).nativeElement;
fixture.detectChanges();
expect(ref.innerHTML)toContain('Name');// or whatever
}

)

现在考虑将测试、html和组件文件分离开来。

即使我已经导入了ElemntRef，仍然会出现"nativeElement属性无法读取"的错误。

这样访问DOM元素的方式正确吗？或者这个viewChild并没有引用我的标签？

再次提问：我能否使用ID来访问表单元素？据我所读，他们使用带#的引用。

谢谢！

- Tester

---

你可以使用 elementRef 访问原生元素。 - Kunal Mukherjee

发布你的答案，如果它对我有用，我会投票支持它。 - Tester

根据我的经验，你不应该使用单元测试来验证 DOM 是否显示了正确的值。你的测试应该验证组件是否为自身设置了正确的属性/事件，然后使用类似 Selenium 的工具来测试 DOM 是否按照预期工作。如果在单元测试中将它们紧密耦合，那么对 DOM/UI 的任何更改都会导致你编辑大量的测试。 - Simply Ged

我不需要表单验证，只是想测试元素是否存在，例如输入框，并且它是否发送了正确的数据。我该如何访问它？ - Tester

Answer 1

要在 Angular 中直接访问 DOM，您可以谨慎地使用 ElementRef

然而，直接访问 DOM 元素并不是一个好的实践，因为它会使您容易受到 XSS 攻击。

---

您的 AppComponent

import {Component, ElementRef} from '@angular/core';

@Component({
    selector: 'my-app'
})
export class AppComponent implements ngOnInit {

constructor(private _elementRef : ElementRef) { }

ngOnInit(): void
{
  this.ModifyDOMElement();
}

 ModifyDOMElement() : void
 { 
   //Do whatever you wish with the DOM element.
   let domElement = this._elementRef.nativeElement.querySelector(`#someID`);
 } 
}

Your HTML

<p id="someID"></p>

- Kunal Mukherjee

---

如何在测试类中访问它？ - Tester

只需在测试类中通过 import { ElementRef } from '@angular/core'; 导入 ElementRef，并像这样将其注入到构造函数中 constructor(private _elementRef : ElementRef) { }。 - Kunal Mukherjee

在我的测试类中，这是一个与我的应用程序组件不同的文件，我应该这样做：it().... expect (comp.domElement)toContain(...)? - Tester

你尝试在测试类中导入 ElementRef 了吗？ - Kunal Mukherjee

是的，我已经导入了它。现在我该如何测试它？你向我展示的是如何在我的appComponent中访问它。 - Tester