web-dev-qa-db-fra.com

remplacement de document.getElementById dans angular4 / typescript?

Donc, je travaille avec angular4 dans ma pratique et c’est nouveau pour moi. Heureusement, pour obtenir les éléments HTML et leurs valeurs, j’utilisais <HTMLInputElement> document.getElementById ou <HTMLSelectElement> document.getElementById

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

angulartypescript
42
Nino Gutierrez

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

Voir 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.log imprimera du texte.

69
Alexandre Annic

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

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 se trouve dans ce composant, vous pouvez utiliser références de modèle .

39
Suren Srapyan
  element: HTMLElement;

  constructor() {}

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

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

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

Notez que ceci est pour Angular 8 ou postérieur.

3
Gustavo Santamaría