Angular Material Autocomplete中如何替代setTimeout实现滚动定位

根因说明 #

opened事件触发时，Autocomplete的下拉面板DOM还未完成渲染挂载，滚动容器、选项元素都未完成初始化，此时直接调用_setScrollTop没有对应的可操作DOM节点，所以不会生效。嵌套setTimeout是将执行逻辑推到当前渲染任务队列清空后执行，等面板DOM渲染完成再调用，所以功能正常。

替代setTimeout的实现方案 #

方案1：使用Angular官方提供的afterNextRender（Angular 16+ 推荐） #

Angular 16及以上版本提供了afterNextRender钩子，专门用于在当前所有DOM渲染任务完成后执行回调，是替代DOM操作类场景下setTimeout的官方方案，实现代码如下：

// 首先从@angular/core导入钩子
import { afterNextRender } from '@angular/core';

// 事件处理逻辑
autoOpened() {
  afterNextRender(() => {
    this.testAuto._setScrollTop(30);
  });
}

方案2：监听选项列表加载完成（兼容所有Angular版本） #

通过监听选项集合的加载状态，等所有选项DOM渲染完成后再执行滚动操作，兼容性更好：

import { ViewChildren, QueryList } from '@angular/core';
import { MatOption } from '@angular/material/autocomplete';
import { take } from 'rxjs';

// 组件内声明选项查询
@ViewChildren(MatOption) options: QueryList<MatOption>;
@ViewChild('auto') testAuto: MatAutocomplete;

autoOpened() {
  this.options.changes.pipe(take(1)).subscribe(() => {
    this.testAuto._setScrollTop(30);
  });
}

方案3：直接操作滚动容器（避免依赖私有API） #

_setScrollTop是MatAutocomplete的私有方法，存在版本迭代后API变更的风险，你也可以直接操作公开的面板DOM节点实现滚动：

import { afterNextRender } from '@angular/core';

autoOpened() {
  afterNextRender(() => {
    const panelElement = this.testAuto.panel.nativeElement;
    panelElement.scrollTop = 30;
  });
}

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