Как я могу получить доступ к элементам 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 elemnts ?? Или этот viewChild не ссылается на мой ярлык ??

И снова я могу использовать идентификатор для доступа к элементам формы? То, что я прочитал, они используют ссылку с #.

Спасибо !!

Answer 1

Для прямого доступа к DOM в Angular вы можете разумно использовать 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>