Angular根据图片尺寸添加类名时出现无限循环问题求助

问题核心是你在onload回调里修改了组件绑定的属性（比如imgClass），触发Angular的变更检测，导致视图重新渲染，图片元素被重新创建，再次触发onload，形成无限循环。

解决方案1：先解绑onload事件再处理逻辑 #

在getImgDimensions函数里，先移除当前图片的onload监听，避免重复触发：

getImgDimensions(ev: Event) {
  const img = ev.target as HTMLImageElement;
  // 先解绑onload事件
  img.onload = null;
  
  console.log(img.width, img.height);
  if (img.width > img.height) {
    this.imgClass = 'landscape';
  } else {
    this.imgClass = 'portrait';
  }
}

这样图片加载完成后，只会执行一次回调，不会因为变更检测重新渲染后再次触发。

解决方案2：用Image对象在TS中异步加载图片（推荐） #

不依赖DOM元素的onload，而是在TypeScript里创建独立的Image实例加载选中的图片，获取尺寸后再渲染DOM：

onFileSelected(event: any) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        console.log(img.width, img.height);
        this.imgClass = img.width > img.height ? 'landscape' : 'portrait';
        this.imageUrl = e.target?.result as string;
      };
      img.src = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }
}

然后模板里只需要绑定imageUrl和imgClass即可，不用在img标签上写(load)事件：

<img *ngIf="imageUrl" [src]="imageUrl" [ngClass]="imgClass" />

这种方式完全避开了DOM渲染和变更检测的循环触发问题，逻辑更清晰。

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