Angular2 retrieve all elements with class name

问题

Can anyone help with how to find 'All' Elements with a particular class name in Angular 2? I thought it would be trivial but it's giving me more problems that was prepared for.

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

I thought by doing what I have below would return all the elements with class "classImLookingFor" but it only returns the first instance.

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

Afterwards, my markup looks like this.

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

It seems like I should be able to create a Renderer array, but that doesn't seem to work either. I need to manipulate each element with that class name. Thanks in Advance

回答1:

Doesn't this return all the elements in the DOM? Is there a way how to return only elements generated by the Angular component I'm "in"?

You need to...

Inject ElementRef in the constructor

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

Find the elements you are searching using querySelectorAll api.

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

The answer @Aravind has provided is not the best for the performance as it will search the whole DOM.

This solution will just search the DOM inside the current component.

回答2:

Answering as the comment worked for the OP.

You should be using

document.querySelectorAll('.classImLookingFor')

回答3:

This might be a little over-simplistic for your use case, but is there any reason you can't use the native DOM functions, like so?

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

回答4:

you need to use DOM in angular

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

it works for me!

来源：https://stackoverflow.com/questions/43376081/angular2-retrieve-all-elements-with-class-name

标签

angular

renderer