页面加载时滚动到指定div的Angular实现问题求助

方案1：利用Angular ViewChildren监听异步数据与DOM变化 #

1. 先在组件类引入必要的依赖：

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

2. 修改模板，给展开的div添加模板引用变量：

<div class="container">
  <hr>
  <div *ngFor="let category of parentData| async; let i = index" class="category-content">
    <div #expandedDiv class="expanded-div" *ngIf="collapsible == category.id">
      <!-- 展开的手风琴内容 -->
    </div>
    <div *ngIf="collapsible != category.id">
      <!-- 未展开的内容 -->
    </div>
  </div>
</div>

3. 在组件类中获取元素列表，等数据加载完成后滚动到目标元素：

@Component({
  // 你的组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('expandedDiv') expandedDivs!: QueryList<ElementRef>;
  collapsible: number; // 已选中的分类ID
  parentData: Observable<any[]>; // 你的异步分类数据

  ngAfterViewInit(): void {
    this.parentData.subscribe(() => {
      // 手动触发变更检测，确保DOM已更新
      setTimeout(() => {
        const targetDiv = this.expandedDivs.first;
        if (targetDiv) {
          targetDiv.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  }
}

方案2：通过动态ID定位目标元素 #

1. 给展开的div设置动态ID：

<div class="container">
  <hr>
  <div *ngFor="let category of parentData| async; let i = index" class="category-content">
    <div id="expanded-{{category.id}}" class="expanded-div" *ngIf="collapsible == category.id">
      <!-- 展开的手风琴内容 -->
    </div>
    <div *ngIf="collapsible != category.id">
      <!-- 未展开的内容 -->
    </div>
  </div>
</div>

2. 在组件类中，等待数据渲染完成后执行滚动：

ngOnInit(): void {
  this.parentData.subscribe(() => {
    setTimeout(() => {
      const targetElement = document.getElementById(`expanded-${this.collapsible}`);
      // 先判断元素存在，再调用滚动方法，解决TypeScript空值报错
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
}

原方法失效原因说明 #

• ngOnInit中直接调用getElementById时，异步数据还未加载，*ngIf条件未触发，目标DOM元素根本不存在。
• TypeScript的Object is possibly 'null'报错，是因为getElementById可能返回null，必须先判断元素存在才能调用scrollIntoView。

额外优化（替代setTimeout） #

如果不想用setTimeout，可以用ChangeDetectorRef手动触发变更检测：

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

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit(): void {
  this.parentData.subscribe(() => {
    this.cdr.detectChanges(); // 强制更新DOM
    const targetDiv = this.expandedDivs.first;
    if (targetDiv) {
      targetDiv.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
}

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