Есть ли / как лучше всего запросить все теги img в приложении Angular?

Question

Мне было интересно, есть ли способ или как можно получить массив всех тегов img в приложении Angular? Что-то вроде:

let imgArray = document.querySelectorAll('img');

Тот, который запрашивает все компоненты и дочерние компоненты.

Answer 1

Вы можете также использовать директиву и ViewChildren. Селектор в директиве может быть элементом html, например,

import { Directive,ElementRef } from '@angular/core';

@Directive({
  selector: 'img' //<---see the selector is all the "img"
})
export class ImgDirective {
  constructor(public elementRef:ElementRef) { }
}

Итак, например, вы можете иметь такой компонент, как

export class AppComponent implements AfterViewInit  {
  name = 'Angular';
  @ViewChildren(ImgDirective) images:QueryList<ImgDirective>
  ngAfterViewInit()
  {
    console.log(this.images)
    this.images.forEach(x=>{
      console.log(x.elementRef.nativeElement.getAttribute('src'))
    })
  }
}

См. stackblitz

ПРИМЕЧАНИЕ: Директива на самом деле ничего не делает, вы можете сделать что-то более интересное, например, вы можете использовать HostListener, чтобы сделать что-то вроде:

  @HostListener("mouseenter") onMouseEnter() {
    this.elementRef.nativeElement.style.opacity = 0.5;
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.elementRef.nativeElement.style.opacity = 1;
  }

Обновить если мы введем простую службу

@Injectable({
  providedIn: 'root',
})
export class DataService {
  images:any[]=[]
  constructor() { }

}

В директиве:

constructor(public elementRef: ElementRef,dataService:DataService) {
    dataService.images.push(this.elementRef)
  }

Мы можем иметь все imgs

console.log(this.dataService.images)

Но только изображения что у вас есть в один момент.