Angular中如何获取源元素？（优先不使用ViewChildren/QueryList）

首先得明确：你写的 <span *ngIf="someFunction(refToThisSpanElement)"></span> 本身逻辑走不通——*ngIf 是在元素渲染前判断条件的，这时候元素还未创建，根本拿不到它的引用。

下面给你两种不用 ViewChildren/QueryList 的实现方式：

方式一：先存元素引用再判断 #

适合确实需要操作DOM元素的场景：

组件类代码 #

export class YourComponent {
  // 用Map存储每个ngFor循环项对应的元素引用，键直接用循环的item
  elementMap = new Map<any, HTMLElement>();

  // 元素初始化后调用，保存引用到Map中
  saveElement(item: any, el: HTMLElement) {
    this.elementMap.set(item, el);
  }

  // 你的判断函数，基于存储的元素引用做逻辑处理
  shouldShow(item: any): boolean {
    const el = this.elementMap.get(item);
    // 这里写你的判断逻辑，比如判断元素宽度
    return el ? el.offsetWidth > 100 : false;
  }
}

模板代码 #

<ng-container *ngFor="let item of yourDataList">
  <!-- 先渲染元素并保存引用 -->
  <span #spanEl (ngAfterViewInit)="saveElement(item, spanEl)">{{ item.text }}</span>
  <!-- 调用判断函数，基于已保存的元素引用控制显示 -->
  <span *ngIf="shouldShow(item)">符合条件的内容</span>
</ng-container>

方式二：直接用循环项属性判断（优先推荐） #

如果你的判断逻辑不需要直接操作DOM，只是基于数据项的属性，那完全不用涉及DOM引用，直接用数据判断即可：

组件类代码 #

export class YourComponent {
  someFunction(item: any): boolean {
    // 这里直接用item的属性做判断，比如item.isActive、item.content.length等
    return item.isActive && item.content.length > 10;
  }
}

模板代码 #

<span *ngFor="let item of yourDataList" *ngIf="someFunction(item)">
  {{ item.content }}
</span>

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