如何以角度访问 DOM 元素

Posted 2023-03-05

【中文标题】如何以角度访问 DOM 元素

【英文标题】：How can I access DOM elements in angular

【发布时间】：2018-10-14 14:57:57

【问题描述】：

我正在以角度测试模板驱动的表单，只是测试而不是验证它。 我读过它可以使用 viewChild 属性来完成，但它似乎对我不起作用。

我在我的一个表单标签中创建了这样的参考：

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

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

@ViewChild('ref') ref:ElementRef;

所以，我想我创建了一个 ElementRef 类型的变量，它是我输入的 viewChild。所以现在我可以在测试中使用 ref 了。

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

let ref: htmlElement:

it(....=>

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


)

现在考虑测试、html 和组件文件是相互分离的。

我仍然收到 nativeElemnt 属性无法读取的错误。即使我已导入 ElemntRef。

这是访问 DOM 元素的正确方法吗？还是这个 viewChild 没有引用我的标签？？

我可以再次使用 ID 访问表单元素吗？我所读到的他们使用带有# 的引用。

谢谢！！

【问题讨论】：

你可以使用elementRef来访问原生元素。

发表你的答案，如果它适合我​​，我会投票

根据我的经验，您不会使用单元测试来验证 DOM 是否显示正确的值。您的测试应该验证您的组件是否为自己设置了正确的属性/事件，然后使用 selenium 之类的东西来测试 DOM 是否按预期工作。如果您在单元测试中像这样将它们紧密结合，那么对 DOM/UI 的任何更改都会导致您编辑大量测试。

我再次不需要验证表单。只是为了测试一个元素是否存在，例如一个输入。它发送正确的数据。我怎样才能访问它？？？

【参考方案1】：

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

但是，直接访问 DOM 元素并不是一个好习惯，因为 它使您容易受到 XSS 攻击。

---

你的应用组件

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`);
  

你的 HTML

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

【讨论】：

以及如何在测试类中访问它？？

只需在您的测试类中导入ElementRef by import ElementRef from '@angular/core'; 并将其注入到构造函数中，如constructor(private _elementRef : ElementRef) 。

在与我的 appcomponnet 不同的文件的测试类中，我应该这样做：it()....期望 (comp.domElement)toContain(...)？

你试过在你的测试类中导入ElementRef吗？

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