document.getElementById sostituzione in angular4 / typescript?

Quindi, sto lavorando con angular4 nel mio lavoro pratico e questo è nuovo per me. Fortunatamente, per ottenere elementi html e i suoi valori ho usato <HTMLInputElement> document.getElementByIdo <HTMLSelectElement> document.getElementById

Mi chiedo se ci sia qualche sostituto per questo in angolare

Puoi taggare il tuo elemento DOM utilizzando #someTag, quindi ottenerlo con @ViewChild('someTag').

Vedi esempio completo:

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.logstamperà del testo .

Puoi semplicemente iniettare il token DOCUMENT nel costruttore e utilizzare le stesse funzioni su di esso

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

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

Oppure, se l'elemento che desideri ottenere è in quel componente, puoi utilizzare i riferimenti ai modelli .

Per Angular 8 o posterior @ViewChild hai un parametro aggiuntivo chiamato opts, che ha due proprietà: read e static, read è opzionale. Puoi usarlo in questo modo:

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

constructor() {
// ...

<div #mydiv></div>

NOTA: Statico: false non è più richiesto in Angular 9. (solo { static: true }quando utilizzerai quella variabile all'interno di ngOnInit)

Prova questo:

Codice file TypeScript:

(<HTMLInputElement> document.getElementById ("name")). Value

Codice HTML:

 <input id = "name" type = "text" #name /> 

  element: HTMLElement;

  constructor() {}

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