document.getElementById remplacement dans angular4 / typescript?

Donc, je travaille avec angular4 dans mon travail de pratique et c'est nouveau pour moi. Heureusement, pour obtenir des éléments html et ses valeurs, j'ai utilisé <HTMLInputElement> document.getElementByIdou <HTMLSelectElement> document.getElementById

Je me demande s'il y a un remplacement pour cela en angulaire

Vous pouvez baliser votre élément DOM en utilisant #someTag, puis l'obtenir avec @ViewChild('someTag').

Voir l'exemple complet:

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.logimprimera du texte .

Vous pouvez simplement injecter le jeton DOCUMENT dans le constructeur et utiliser les mêmes fonctions dessus

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

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

Ou si l'élément que vous souhaitez obtenir est dans ce composant, vous pouvez utiliser des références de modèle .

Pour Angular 8 ou postérieur, @ViewChild a un paramètre supplémentaire appelé opts, qui a deux propriétés: read et static, read est facultatif. Vous pouvez l'utiliser comme ceci:

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

constructor() {
// ...

<div #mydiv></div>

REMARQUE: Static: false n'est plus requis dans Angular 9. (juste au { static: true }moment où vous allez utiliser cette variable dans ngOnInit)

  element: HTMLElement;

  constructor() {}

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

Essaye ça:

Code de fichier TypeScript:

(<HTMLInputElement> document.getElementById ("nom")). Valeur

Code HTML:

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