时间戳

首页 > 解决方案 > 如何获取角度组件内的所有图像，包括子组件（以及子组件...）中的图像

angular - 如何获取角度组件内的所有图像，包括子组件（以及子组件...）中的图像

问题描述

我尝试了不同的 CSS 选择器和方法，比如

var elements = document.querySelectorAll('#container img');
var elements = this.el.nativeElement.querySelectorAll('img');
var elements = this.el.nativeElement.getElementsByTagName('img');

他们都只在父组件中选择。有没有办法实现这一目标？类似于 ::ng-deep 的行为。

只是为了让它更清楚一点，我想为不同的页面部分应用某种加载屏幕。每个部分都是一个角分量，它可以包含其他自由结构的分量。对于第一种方法，我只想为每个图像实现 onload 处理程序。这段代码似乎工作正常，但它只引用组件自己的图像。所以，如果里面有一个带有巨大图像的子组件，我的加载屏幕逻辑就会失败:(

const addOnloadToImages = () => {
  const images = this.el.nativeElement.querySelectorAll<HTMLImageElement>('img');
  console.log(`${this.sectionId} images: `, images.length);
  let imagesLoaded = 0;

  if (!images.length) this.domService.sectionImagesLoaded.next(this.sectionId);
  images.forEach(image => {
    image.onload = (event) => {
      imagesLoaded++;
      if (imagesLoaded === images.length) this.domService.sectionImagesLoaded.next(this.sectionId);
    };
  });
}

标签： angularselectors-api

解决方案

您可以使用ContentChild. 例如：

@Component({
  selector: `my-component`,
  template: `
    <div #root>
      <img src="" />
      <parent-1>
        <child-with-images></child-with-images>
      </parent-1>
    </div>
  `
})
export class MyComponent implements AfterContentInit {
  @ContentChild('root') rootContainer: ElementRef<HTMLDivElement>;

  ngAfterContentInit() {
    const allImages = this.rootContainer.nativeElement.getElementsByTagName('img');
  }
}

推荐阅读