remplacement de document.getElementById dans angular4 / typescript ?

Question

Je travaille avec angular4 dans mon travail pratique, et c'est nouveau pour moi.

Afin d'obtenir les éléments HTML et leurs valeurs, j'ai utilisé <HTMLInputElement> document.getElementById ou <HTMLSelectElement> document.getElementById .

Je me demande s'il existe un remplacement pour cela dans angular.

Answer 1

Vous pouvez marquer 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.log imprimera Un peu de texte .

Answer 2

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

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 voulez obtenir est dans ce composant, vous pouvez utiliser références du modèle .

Answer 3

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

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

constructor() {
// ...

<div #mydiv></div>

REMARQUE : Static : false n'est plus nécessaire dans Angular 9 (juste { static: true } quand vous allez utiliser cette variable dans ngOnInit)

Answer 4

Essayez ça :

Code du fichier TypeScript :

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

Code HTML :

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

Answer 5

  element: HTMLElement;

  constructor() {}

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