Angular 2: accéder à un élément à partir du composant, getDocumentById ne fonctionne pas
J'ai un composant angulaire 2 où je veux récupérer un élément div
<div id ="myId"> par son id. J'essaie de faire: document.getElementById("myId") dans mon composant (TypeScript), mais j'obtiens une erreur: "Impossible de trouver le nom du document". Je vois que dans d'autres messages, nous pouvons faire quelque chose de similaire en utilisant @ViewChild, mais je ne vois pas comment nous pouvons l'utiliser avec un div, des idées?
2 réponses
Vous pouvez utiliser @ViewChild avec un div en ajoutant un TemplateRef .
Le Modèle
<div id ="myId" #myId>
Composant
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('myId') myId: ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this.myId.nativeElement);
}
}
Ce billet de blog par Kara Erickson est une très bonne lecture pour se familiariser avec l'approche angulaire de faire des choses comme ça.
Ajouter variable de référence de Modèle à l'élément auquel vous devez accéder:
<div #myDiv></div>
Et dans le composant:
class MyComponent implements AfterViewInit {
@ViewChild('myDiv') myDiv: ElementRef;
constructor() {}
ngAfterViewInit() {
console.log(this.myDiv);
}
}