¿Alguien puede ayudar con la forma de encontrar 'Todos' los elementos con un nombre de clase particular en Angular 2? Pensé que sería trivial, pero me está dando más problemas de los que estaba preparado.
<span class="classImLookingFor">foo</span> <span class="classImLookingFor">Voo</span> <span class="classImLookingFor">Moo</span>Pensé que al hacer lo que tengo a continuación devolvería todos los elementos con la clase "classImLookingFor", pero solo devuelve la primera instancia.
constructor(private renderer: Renderer){} ngAfterViewInit(){ const el = this.renderer.selectRootElement('.classImLookingFor'); this.renderer.setElementAttribute(el, 'tabindex', 0); }Después, mi marcado se ve así.
<span class="classImLookingFor" tabindex="0">foo</span> <span class="classImLookingFor">Voo</span> <span class="classImLookingFor">Moo</span>Parece que debería poder crear una matriz Renderer, pero eso tampoco parece funcionar. Necesito manipular cada elemento con ese nombre de clase. Gracias de antemano
¿Esto no devuelve todos los elementos en el DOM? ¿Hay alguna forma de devolver solo los elementos generados por el componente Angular en el que estoy "en"?
Necesitas...
Inyectar ElementRef en el constructor
constructor(private renderer: Renderer, private elem: ElementRef){} Encuentre los elementos que está buscando usando querySelectorAll api.
ngAfterViewInit(){ // you'll get your through 'elements' below code let elements = this.elem.nativeElement.querySelectorAll('.classImLookingFor'); }La respuesta que ha proporcionado @Aravind no es la mejor para el rendimiento, ya que buscará en todo el DOM.
Esta solución solo buscará el DOM dentro del componente actual.
Compatibilidad de documentos Angular 10+ con SSR, importar:
import { DOCUMENT } from '@angular/common'luego inyectar:
constructor(@Inject(DOCUMENT) private _document: HTMLDocument) { }Y use en su componente/directiva así:
doSomething(): void { this._document.querySelectorAll('.classImLookingFor') }Responder como el comentario funcionó para el OP.
deberías estar usando
document.querySelectorAll('.classImLookingFor')