如何以角度訪問DOM元素

Question

我用角度來模擬一個模板驅動的表單，只測試不驗證它。 我已經讀過它可以使用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訪問表單元素嗎？ 我讀過他們使用＃引用。

謝謝！！

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

你的HTML

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