如何以角度方式访问 DOM 元素

Question

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

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

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

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

@ViewChild('ref') ref:ElementRef;

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

在我的测试中我这样做：

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

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

我仍然收到无法读取 nativeElemnt 属性的错误。 尽管我已经导入了 ElemntRef。

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

我可以再次使用 ID 来访问表单元素吗？我读到的内容是使用带有 # 的引用。

谢谢！！

Answer 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>