Document.getElementById замена в угловом4/typescript?

Итак, я работаю с angular4 в своей практике, и это ново для меня. К счастью, для того, чтобы получить элементы html и его значения, которые я использовал <HTMLInputElement> document.getElementById или <HTMLSelectElement> document.getElementById

Мне интересно, есть ли замена для этого в angular

Ответы

Ответ 1

Вы можете пометить свой элемент DOM с помощью #someTag, а затем получить его с помощью @ViewChild('someTag').

Смотрите полный пример:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: '
        <div #myDiv>Some text</div>
    ',
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.log напечатает некоторый текст.

Ответ 2

Вы можете просто вставить токен DOCUMENT в конструктор и использовать те же функции на нем

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

Или, если элемент, который вы хотите получить, находится в этом компоненте, вы можете использовать ссылки на шаблоны.

Ответ 3

  element: HTMLElement;

  constructor() {}

  fakeClick(){
    this.element = document.getElementById('ButtonX') as HTMLElement;
    this.element.click();
  }

Ответ 4

Для Angular 8 или posterior @ViewChild есть дополнительный параметр opts, который имеет два свойства: read и static, чтение не является обязательным. Вы можете использовать это так:

@ViewChild('mydiv', { static: false }) mydiv: ElementRef;

Обратите внимание, что это для угловых 8 или задних.