如何獲取 angular 組件中的所有圖像，包括子組件（以及子組件……）中的圖像

Question

我嘗試過不同的 css 選擇器和方法，例如

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

它們在父組件中都只有 select。 有沒有辦法實現這一目標？ 類似於::ng-deep 的行為。

只是為了讓它更清楚一點，我想為不同的頁面部分應用某種加載屏幕。 每個部分是一個 angular 組件，可以包含其他自由結構的組件。 對於第一種方法，我只想為每個圖像實現 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);
    };
  });
}

Answer 1

您可以使用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');
  }
}