如何遍历ElementRef.nativeElement？Angular指令*ngFor下DOM元素筛选问题

首先明确：每个绑定在*ngFor循环元素上的指令实例，其elementRef.nativeElement仅指向当前迭代的单个DOM元素，不会同时获取多个。如果是在父组件中批量获取了指令实例后需要筛选特定元素，可采用以下方案：

方案1：通过指令输入参数传递唯一标识 #

给指令添加输入属性，接收每个迭代项的唯一标识，后续通过该标识匹配对应的指令实例与元素：

// 指令代码
import { Directive, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Input() itemId: string;

  constructor(public el: ElementRef, private renderer: Renderer2) {}
}

模板中绑定标识：

<div *ngFor="let item of items" myDirective [itemId]="item.id">
  {{ item.name }}
</div>

父组件中筛选目标元素：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MyDirective } from './my.directive';

@Component({
  // 组件配置
})
export class ParentComponent {
  @ViewChildren(MyDirective) directives: QueryList<MyDirective>;

  getTargetElement(targetId: string) {
    const targetDirective = this.directives.find(dir => dir.itemId === targetId);
    if (targetDirective) {
      // 拿到目标元素后可通过Renderer操作
      const targetEl = targetDirective.el.nativeElement;
      this.renderer.addClass(targetEl, 'active');
      return targetEl;
    }
    return null;
  }
}

方案2：利用DOM原生ID属性筛选 #

直接给*ngFor的元素设置唯一ID，再通过ID匹配元素：

模板：

<div *ngFor="let item of items" myDirective [id]="`item-${item.id}`">
  {{ item.name }}
</div>

指令内可直接读取自身元素的ID：

const currentElementId = this.el.nativeElement.id;

注意：Angular中优先通过指令实例操作DOM，尽量避免直接调用document.getElementById，防止破坏变更检测机制。

方案3：通过迭代索引筛选 #

若没有唯一业务ID，可使用*ngFor的索引作为标识：

模板：

<div *ngFor="let item of items; let i = index" myDirective [itemIndex]="i">
  {{ item.name }}
</div>

指令添加输入属性：

@Input() itemIndex: number;

父组件中通过索引筛选：

const targetDirective = this.directives.find(dir => dir.itemIndex === targetIndex);

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