web-dev-qa-db-fra.com

Angular2 récupère tous les éléments avec le nom de la classe

Quelqu'un peut-il aider à trouver comment "Tous" éléments avec un nom de classe particulier dans Angular 2? Je pensais que ce serait trivial, mais cela me donne plus de problèmes qui ont été préparés.

<span class="classImLookingFor">foo</span>
<span class="classImLookingFor">Voo</span>
<span class="classImLookingFor">Moo</span>

J'ai pensé qu'en faisant ce que j'ai ci-dessous, tous les éléments de la classe "classImLookingFor" seraient renvoyés, mais cela ne renvoie que la première instance.

constructor(private renderer: Renderer){}
ngAfterViewInit(){
 const el = this.renderer.selectRootElement('.classImLookingFor');
 this.renderer.setElementAttribute(el, 'tabindex', 0);
}

Ensuite, mon balisage ressemble à ceci.

<span class="classImLookingFor" tabindex="0">foo</span>
<span class="classImLookingFor">Voo</span>
<span class="classImLookingFor">Moo</span>

Il semble que je devrais être capable de créer un tableau Renderer, mais cela ne semble pas fonctionner non plus. Je dois manipuler chaque élément avec ce nom de classe. Merci d'avance

angularrenderer
18
dekaha1

Cela ne renvoie-t-il pas tous les éléments du DOM? Existe-t-il un moyen de ne renvoyer que les éléments générés par le Angular angulaire que je suis "dans"?

Tu dois...

  1. Injecter ElementRef dans le constructor

    constructor(private renderer: Renderer, private elem: ElementRef){}

  2. Trouvez les éléments que vous recherchez en utilisant querySelectorAll api.

    ngAfterViewInit(){
    // you'll get your through 'elements' below code
    let elements = this.elem.nativeElement.querySelectorAll('.classImLookingFor');
}

La réponse @Aravind fournie n'est pas la meilleure pour la performance, car elle cherchera dans tout le DOM.

Cette solution cherchera simplement le DOM à l'intérieur du composant actuel.

26
Paritosh

Répondre comme le commentaire a fonctionné pour le PO.

Vous devriez utiliser

document.querySelectorAll('.classImLookingFor')
6
Aravind

Cela peut paraître un peu trop simpliste pour votre cas d'utilisation, mais y a-t-il une raison pour laquelle vous ne pouvez pas utiliser les fonctions DOM natives, comme cela?

var domRepresentation = document.getElementsByClassName('classImLookingFor');
var angularElement = angular.element(domRepresentation);
3
Billy Barry

vous devez utiliser DOM dans angular

var element=document.getElementsByClassName("X").item(0);

ça marche pour moi!

0
mohsen malvandy niko