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>

如何以角度访问DOM元素

1 个答案:

您的AppComponent

您的HTML