web-dev-qa-db-fra.com

Comment effectuer une manipulation DOM dans les composants Angular?

Comment obtenir des éléments DOM dans Angular (version 2.x et supérieure)? Les fonctions de base comme addClass, removeClass etc. ne sont pas disponibles dans TypeScript, alors comment pouvons-nous faire ces manipulations DOM dans angular? Veuillez suggérer le cas échéant. TIA

angulartypescriptangular2-componentsangular5
9
Vishal Gulati

Vous pouvez accéder à vos éléments DOM en utilisant le décorateur ViewChild de cette manière:

@Component({
    ....
    templateUrl: 'mytemplate.html'
})

export class MyComponent{
  @ViewChild('selector') private someName;
  constructor() {
     //this is your dom
     //this.someName.nativeElement
  }

}

et dans votre classe de modèle, vous devez spécifier qui est ce sélecteur

<div #selector> </div>

ou vous pouvez utiliser la classe ElementRef

import {Component, AfterViewInit,ElementRef} from "@angular/core";

export class MyComponent  implements  AfterViewInit {

  constructor(protected elementRef: ElementRef) {

  }

  ngAfterViewInit() {
       //you can reach your dom element by using
       //this.elementRef.nativeElement
   }
}

Vous êtes libre d'utiliser des bibliothèques tierces comme Jquery pour addClass, removeClass dans TypeScript.

10
omeralper

Les fonctions de base comme addClass, removeClass etc. ne sont pas disponibles dans TypeScript

Ils sont disponibles. Tout ce qui peut être fait en JS peut être fait en TypeScript. Vous pouvez également utiliser jQuery alors qu'il est déconseillé de l'utiliser avec Angular2

Quelques explications pour obtenir une référence à un élément angular 2/TypeScript: mettre la main sur un élément dans le modèle

Cela étant dit, dans Angular2, vous devez éviter de modifier impérativement le DOM mais plutôt utiliser la liaison avec des directives structurelles comme *ngFor, *ngIf, ..., reliant comme [class.class-name']="true" ou des directives comme ngClass.

Pour plus de détails, voir https://angular.io/docs/ts/latest/guide/

7
Günter Zöchbauer