110 votes

remplacement de document.getElementById dans angular4 / typescript ?

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.

2 votes

Pourquoi ne pas utiliser getElementById ?

0 votes

Je me demande s'il existe un moyen angulaire d'obtenir des éléments.

172voto

Alexandre Annic Points 2913

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 .

0 votes

Une erreur s'affiche Erreur : Can't resolve '@angular/core/src/metadata/di' Erreur : Erreur : Impossible de résoudre '@angular/core/src/linker/element_ref'.

2 votes

nvm, résolu en important comme ceci. import { Component, OnInit,ViewChild,ElementRef } from '@angular/core' ;

23 votes

cela ne fonctionnera pas si vous avez un élément de domaine conditionnel comme *ngFor, *ngIf, etc.

86voto

Suren Srapyan Points 42277

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 .

2 votes

Pourquoi devrais-je injecter l'objet document et ne pas utiliser directement celui fourni par javascript ?

1 votes

@Davide nous nous appuyons sur le système d'Angular. Plus tard, ils peuvent mettre en œuvre de très bonnes choses et faire des vérifications dans leur mise en œuvre. Donc nous nous appuyons juste sur l'abstraction ici

29voto

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)

1 votes

Il fonctionne lorsque vous masquez ou affichez dynamiquement des éléments à l'aide de la fonction *ngIf . Comment créez-vous l'élément ?

0 votes

Merci d'avoir fourni la syntaxe mise à jour. Il est important de noter que vous ne pouvez toujours pas saisir n'importe quel élément HTML par nom de balise avec @ViewChild('myDiv'... dans Angular 8. Vous pouvez uniquement saisir un élément dans le balisage du composant étiqueté avec une variable de modèle, par exemple. #mydiv . J'ai failli ne pas voir que votre réponse contenait la balise variable sur l'élément.

10voto

Swati Points 139

Essayez ça :

Code du fichier TypeScript :

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

Code HTML :

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

1 votes

Veuillez décrire l'attribut ou la valeur "name" auquel vous faites référence avec getElementById("name"), car il peut s'agir de l'id ou du #name.

0 votes

Joli ! Ce petit détail fonctionne....

8voto

Cesar Devesa Points 107
  element: HTMLElement;

  constructor() {}

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

4 votes

Cette méthode est très dangereuse (l'exécution de cette commande dans Angular Universal provoque un crash) et ne doit être utilisée que si aucune autre option n'est possible (il faut également tenir compte du fait que l'élément peut ne pas être présent).

5 votes

M@Joniras pourquoi est-ce très peu sûr ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X