javascript - 如何以 Angular 访问 DOM 元素

Question

我正在用 Angular Testing 模板驱动的表单，只是测试而不是验证它。我读过可以使用 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 property cannot be read. 的错误，尽管我已经导入了 ElemntRef。

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

我能否再次使用 ID 访问表单元素？我读过的内容使用了带# 的引用。

谢谢!!

Answer 1

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

However Direct access to DOM elements is not a good practice because it leaves you vulnerable to XSS attacks.

---

你的 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`);
 } 
}

您的 HTML

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