javascript - 是否有/什么是在 Angular 应用程序中查询所有 `img` 标签的最佳方法？

Question

我想知道是否有办法，或者如何在 Angular 应用程序中获取所有 img 标签的数组？大致如下:

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;
  }

更新如果我们注入(inject)一个简单的服务

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

}

在指令中:

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

我们可以拥有所有的图片

console.log(this.dataService.images)

但仅限于您某一时刻所拥有的图像。