Angular 12 遍历指定HTMLElement下所有子HTMLElement的实现方案问询

1. 调整模板代码 #

给目标容器加上Angular模板引用标记，避免直接用原生id操作DOM：

<div #modelpreview class="previewbox">
    <img class="previewimg" src="../images/xxx1.png" id="prev1"></img>
    <img class="previewimg" src="../images/xxx2.png" id="prev2"></img>
    <img class="previewimg" src="../images/xxx3.png" id="prev3"></img>
</div>

注意：要确保.previewimg的position属性设置为relative/absolute/fixed，left、top属性才会生效

2. 组件类逻辑实现 #

在对应的component.ts文件中添加如下代码：

import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';

@Component({
  // 你的组件配置，比如selector、templateUrl、styleUrls这些保持原来的即可
})
export class YourComponent {
  // 获取容器的DOM引用
  @ViewChild('modelpreview') modelPreviewRef!: ElementRef<HTMLDivElement>;

  // 监听窗口resize事件
  @HostListener('window:resize')
  onWindowResize() {
    // 先判断容器是否已初始化完成
    if (!this.modelPreviewRef?.nativeElement) return;

    // 获取容器下所有img元素
    const imgList = this.modelPreviewRef.nativeElement.querySelectorAll<HTMLImageElement>('.previewimg');
    
    // 遍历修改每个img的left、top属性，此处计算逻辑可按你的业务需求调整
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    imgList.forEach((img, index) => {
      // 举个示例，这里可以替换成你自己的计算规则
      img.style.left = `${windowWidth * 0.1 + index * 20}px`;
      img.style.top = `${windowHeight * 0.1}px`;
    });
  }

  // 可选：如果需要页面初始化时也执行一次定位逻辑，可在ngAfterViewInit钩子调用上面的方法
  ngAfterViewInit() {
    this.onWindowResize();
  }
}

可选优化：添加防抖避免频繁触发 #

resize事件触发频率很高，多次重绘可能造成卡顿，可以加防抖处理：

// 先在组件类里定义防抖定时器
private resizeTimer: any = null;

@HostListener('window:resize')
onWindowResize() {
  // 清空上一次的定时器
  if (this.resizeTimer) clearTimeout(this.resizeTimer);
  // 延迟200ms执行，延迟时长可自行调整
  this.resizeTimer = setTimeout(() => {
    if (!this.modelPreviewRef?.nativeElement) return;
    const imgList = this.modelPreviewRef.nativeElement.querySelectorAll<HTMLImageElement>('.previewimg');
    // 后续修改样式逻辑和上面一致
  }, 200);
}

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