Angular中向ngFor推入新项后如何优雅获取其nativeElement

调用数组push方法后，Angular不会同步完成DOM更新：ngFor的重渲染逻辑跑在当前同步代码块执行完成后的变更检测阶段，在push之后立刻查询DOM，自然拿不到新插入的元素。
setTimeout能生效只是因为宏任务会被排到渲染流程之后执行，本质是利用事件循环的时序碰运气，既不稳定也不符合Angular的设计规范。

这是最符合Angular设计逻辑的实现方式，没有时序问题，不需要手动设置等待时间，DOM渲染完成后会自动触发回调。

1. 首先给ngFor渲染的元素加上模板引用变量：

<ul>
  <!-- 给循环项加#listItem标记，方便ViewChildren查询 -->
  <li *ngFor="let item of itemList" #listItem>
    {{ item.content }}
  </li>
</ul>

2. 在组件类中通过ViewChildren查询所有标记的元素，订阅QueryList的changes事件：

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-list-demo',
  templateUrl: './list-demo.component.html'
})
export class ListDemoComponent implements AfterViewInit {
  itemList: {content: string}[] = [];
  // 查询所有带#listItem标记的渲染元素
  @ViewChildren('listItem') listItemEls!: QueryList<ElementRef>;

  ngAfterViewInit() {
    // 订阅列表元素的变更事件
    const listChangeSub = this.listItemEls.changes.subscribe((updatedList: QueryList<ElementRef>) => {
      // 到这里ngFor已经完成所有DOM更新，直接拿新元素即可
      const newAddedEl = updatedList.last.nativeElement;
      // 在这里写你操作新元素nativeElement的逻辑
      // 比如滚动到新元素、给新元素加聚焦状态等

      // 如果只需要单次触发，取到元素后取消订阅即可
      // listChangeSub.unsubscribe();
    });
  }

  addNewItem() {
    // 正常push新数据即可，不需要加任何延迟等待
    this.itemList.push({content: '新的列表项'});
  }
}

• 时序100%可靠：只有当ngFor完成对应DOM节点的插入渲染后，changes回调才会触发，不会出现拿不到元素的情况
• 无额外性能损耗：不需要设置定时轮询或者等待，响应式触发逻辑
• 符合Angular设计规范：用Angular内置的视图查询机制跟踪DOM状态，不依赖浏览器事件循环的黑魔法

如果需要对nativeElement做修改（比如改样式、加属性），优先用Angular内置的Renderer2提供的方法操作，不要直接原生操作DOM，避免出现Angular视图状态和实际DOM不一致的问题。

内容的提问来源于stack exchange，提问作者Rafael de Castro