document.getElementById remplacement dans angular4 / typescript?

90

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

angular typescript

— Nino Gutierrez
source

2

Pourquoi ne pas utiliser getElementById?

— Suren Srapyan

1

Pourquoi tu veux faire ça?

— Léo R.

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

— Nino Gutierrez

138

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 .

— Alexandre Annic
source

Une erreur s'affiche Erreur: impossible de résoudre l'erreur '@ angular / core / src / metadata / di': impossible de résoudre '@ angular / core / src / linker / element_ref'

— Nino Gutierrez

2

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

— Nino Gutierrez

17

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

— Ravindra Thorat

Angular 8+ nécessite deux arguments pour le décorateur ViewChild.

Comment puis-je ajouter #myDiv uniquement si une condition est vraie? Par exemple: avec id je peux faire [id] = "isValid? 'MyDiv': ''. Merci

— daniel8x

78

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 .

— Suren Srapyan
source

24

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)

— Gustavo Santamaría
source

1

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

— Gustavo Santamaría le

7

  element: HTMLElement;

  constructor() {}

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

— Cesar Devesa
source

2

Ceci est très dangereux (l'exécution de cette commande dans Angular Universal provoque un crash) et ne doit être utilisé que si aucune autre option n'est possible (considérez également que l'élément peut ne pas être présent)

— Joniras

2

M @ Joniras pourquoi est-ce très dangereux?

— Sumi Straessle le

6

Essaye ça:

Code de fichier TypeScript:

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

Code HTML:

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

— Swati
source