Angular中如何判断动态ng-template是否加载完成？

你已经实现了基于Angular官方文档的动态组件加载器，但需要等待动态组件内所有图片加载完成后再隐藏加载状态。由于ng-template仅作为占位符不支持loaded事件，这里提供几种可行的解决方案：

方案一：监听动态组件内图片的加载状态 #

动态加载的组件会被渲染到ng-template对应的ViewContainerRef中，因此可以在组件加载完成后，查询其DOM内的所有图片元素，统一监听它们的load/error事件，全部完成后再切换loaded状态。

修改后的TypeScript代码示例 #

@ViewChild(TemplateDirective, { static: true }) templateHost!: TemplateDirective;
screen: Screen = {...}
currentElementIndex = -1;
loaded = false;

constructor(private screenService: ScreenService, private route: ActivatedRoute, private router: Router) {
    ...
}

ngOnInit(): void {
    this.loadScreen();
}

ngAfterViewInit(): void {}

loadScreen(): void {}

async loadElementComponent() {
    // 原有动态组件加载逻辑（示例：获取组件工厂并创建组件）
    const componentFactory = /* 你的组件工厂获取逻辑 */;
    const componentRef = this.templateHost.viewContainerRef.createComponent(componentFactory);
    
    // 等待组件视图初始化完成
    await new Promise(resolve => setTimeout(resolve));
    
    // 获取组件DOM内的所有图片元素
    const imgElements = componentRef.location.nativeElement.querySelectorAll('img');
    
    // 无图片直接标记加载完成
    if (imgElements.length === 0) {
        this.loaded = true;
        return;
    }
    
    // 为每个图片创建加载完成的Promise
    const imageLoadPromises = Array.from(imgElements).map(img => {
        return new Promise<void>((resolve) => {
            // 图片已缓存完成直接resolve
            if (img.complete) {
                resolve();
            } else {
                // 监听加载成功/失败事件（失败也视为完成，避免阻塞）
                img.addEventListener('load', () => resolve());
                img.addEventListener('error', () => resolve());
            }
        });
    });
    
    // 等待所有图片加载完成
    await Promise.all(imageLoadPromises);
    this.loaded = true;
}

方案二：封装图片加载状态指令 #

通过自定义指令监听单张图片的加载状态，在动态组件内汇总所有图片的加载结果，最后通知父组件切换状态。

1. 创建图片加载指令 #

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

@Directive({
  selector: '[appImageLoad]'
})
export class ImageLoadDirective implements OnInit {
  @Output() loaded = new EventEmitter<void>();

  constructor(private el: ElementRef<HTMLImageElement>) {}

  ngOnInit(): void {
    const img = this.el.nativeElement;
    // 图片已缓存
    if (img.complete) {
      this.loaded.emit();
    } else {
      img.addEventListener('load', () => this.loaded.emit());
      img.addEventListener('error', () => this.loaded.emit());
    }
  }
}

2. 修改动态组件逻辑 #

在动态组件内统计已加载图片数量，全部完成后触发事件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  /* 你的组件元数据 */
})
export class DynamicComponent {
  @Input() totalImages: number;
  @Output() allImagesLoaded = new EventEmitter<void>();
  
  private loadedImageCount = 0;

  onImageLoaded(): void {
    this.loadedImageCount++;
    if (this.loadedImageCount === this.totalImages) {
      this.allImagesLoaded.emit();
    }
  }
}

3. 动态组件模板中使用指令 #

<!-- 动态组件内部模板 -->
<img appImageLoad (loaded)="onImageLoaded()" [src]="imageUrl1">
<img appImageLoad (loaded)="onImageLoaded()" [src]="imageUrl2">

4. 父组件监听完成事件 #

async loadElementComponent() {
    const componentFactory = /* 你的组件工厂获取逻辑 */;
    const componentRef = this.templateHost.viewContainerRef.createComponent(componentFactory);
    
    // 传入动态组件内的图片总数
    componentRef.instance.totalImages = 2; // 根据实际图片数量设置
    
    // 监听所有图片加载完成事件
    componentRef.instance.allImagesLoaded.subscribe(() => {
        this.loaded = true;
    });
}

方案说明 #

• ng-template本身不参与DOM渲染，只是提供ViewContainerRef的挂载点，因此判断加载完成的核心是监听动态加载组件内部的资源状态。
• 两种方案都考虑了图片缓存的情况（img.complete判断），避免因缓存导致状态不更新。
• 方案一适合快速改造，无需修改动态组件代码；方案二更灵活，适合需要精细化控制图片加载状态的场景。

内容的提问来源于stack exchange，提问作者Azelytof