Angular应用中点击按钮跳转页面并滚动至指定区域的问题

针对你遇到的跨页面带fragment导航因懒加载组件未完成渲染导致滚动失效的问题，除了ngAfterViewInit里用scrollIntoView的临时方案，还有以下几种可行办法：

1. 监听路由导航结束事件，延迟执行滚动 #

利用Angular Router的NavigationEnd事件，在路由跳转完成后给懒加载组件留足渲染时间再执行滚动逻辑。可以在根组件或者目标页面组件中实现：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 用微任务确保懒加载组件渲染完成
    Promise.resolve().then(() => {
      const fragment = this.router.routerState.root.firstChild?.fragment.value;
      if (fragment) {
        const target = document.getElementById(fragment);
        target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
}

2. 配置Router的锚点滚动策略并优化 #

Angular Router本身支持锚点滚动，但默认逻辑对懒加载组件不友好，可通过配置增强：
在app-routing.module.ts中修改Router配置：

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled', // 启用锚点滚动
      scrollPositionRestoration: 'enabled', // 恢复滚动位置
      scrollOffset: [0, 60], // 可选：适配固定导航栏高度，避免内容被遮挡
      onSameUrlNavigation: 'reload' // 同URL导航时重新触发滚动逻辑
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

之后在目标页面组件的ngAfterViewInit中手动触发一次滚动，确保懒加载元素已存在：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngAfterViewInit() {
  this.route.fragment.subscribe(fragment => {
    if (fragment) {
      setTimeout(() => {
        document.getElementById(fragment)?.scrollIntoView();
      }, 100); // 根据组件实际加载速度调整延迟时间
    }
  });
}

3. 懒加载组件主动通知完成渲染 #

在懒加载的子组件中，当自身渲染完成后，通过事件通知父组件执行滚动：

• 子组件代码：

import { EventEmitter, Output, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-lazy-child',
  templateUrl: './lazy-child.component.html'
})
export class LazyChildComponent implements AfterViewInit {
  @Output() loaded = new EventEmitter<void>();

  ngAfterViewInit() {
    this.loaded.emit();
  }
}

• 父组件（目标页面）代码：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

onLazyComponentLoaded() {
  this.route.fragment.subscribe(fragment => {
    if (fragment) {
      document.getElementById(fragment)?.scrollIntoView();
    }
  });
}

父组件模板中绑定事件：<app-lazy-child (loaded)="onLazyComponentLoaded()"></app-lazy-child>

4. 使用MutationObserver监听元素加载 #

如果不确定懒加载组件的渲染时间，可以用MutationObserver监听DOM变化，直到目标锚点元素出现后再执行滚动：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.fragment.subscribe(fragment => {
    if (!fragment) return;

    const observer = new MutationObserver((mutations) => {
      const target = document.getElementById(fragment);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
        observer.disconnect(); // 找到元素后停止监听
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

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