跨页面调用ScrollIntoView出现类型错误的修复方案咨询

你遇到的核心问题是路由导航是异步操作：当你调用this._router.navigate(["/Home"])后，代码会立刻执行后续的document.getElementById()，但此时Home页面的DOM还没完全渲染完成，目标元素根本不存在，所以会抛出类型错误（elmntToView为null）。第二次点击时页面已经在Home了，DOM早已加载完成，所以能正常找到元素并滚动。

另外你尝试用await等待导航完成，但router.navigate()返回的是一个boolean值（仅表示导航是否成功发起），并不是Promise，所以await根本起不到等待导航完成的作用。

下面提供两种优雅的修复方案，推荐第二种（组件内处理滚动），因为它更符合Angular的组件化思想。

方案1：监听路由导航完成事件 #

通过监听Router的NavigationEnd事件，确保在Home页面完全加载后再执行滚动逻辑：

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

// ...

async calendar() {
  // 发起导航
  const navigationInitiated = this._router.navigate(["/Home"]);
  
  if (navigationInitiated) {
    // 监听导航完成事件，只取一次触发
    this._router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1)
    ).subscribe(() => {
      // 此时Home页面已加载，查找目标元素
      const elmntToView = document.getElementById("Calendar");
      if (elmntToView) { // 加判断避免null报错
        elmntToView.scrollIntoView({behavior: 'smooth'});
      }
      this.toggleHidden();
    });
  }
}

export() {
  const navigationInitiated = this._router.navigate(["/Home"]);
  
  if (navigationInitiated) {
    this._router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1)
    ).subscribe(() => {
      const elmntToView = document.getElementById("Export");
      if (elmntToView) {
        elmntToView.scrollIntoView({behavior: 'smooth'});
      }
      this.toggleHidden();
    });
  }
}

方案2：通过路由参数传递滚动目标（推荐） #

这种方法把滚动逻辑放到Home组件内部，通过路由查询参数告诉Home组件要滚动到哪个元素，更符合Angular的组件职责分离原则：

第一步：修改导航方法，传递查询参数 #

calendar() {
  // 传递scrollTo参数，指定要滚动的元素ID
  this._router.navigate(["/Home"], { queryParams: { scrollTo: 'Calendar' } });
  this.toggleHidden();
}

export() {
  this._router.navigate(["/Home"], { queryParams: { scrollTo: 'Export' } });
  this.toggleHidden();
}

第二步：在Home组件中处理滚动 #

在Home组件的ngAfterViewInit（确保DOM已渲染完成）中监听路由参数，执行滚动：

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

// ...

private queryParamSub: Subscription;

constructor(private route: ActivatedRoute) {}

ngAfterViewInit() {
  // 监听查询参数变化
  this.queryParamSub = this.route.queryParams.subscribe(params => {
    const targetId = params['scrollTo'];
    if (targetId) {
      const elmntToView = document.getElementById(targetId);
      if (elmntToView) {
        elmntToView.scrollIntoView({behavior: 'smooth'});
      }
    }
  });
}

// 记得销毁订阅，避免内存泄漏
ngOnDestroy() {
  if (this.queryParamSub) {
    this.queryParamSub.unsubscribe();
  }
}

• 滚动逻辑属于Home页面的职责，放到Home组件内更合理；
• 避免了在其他组件中直接操作Home页面的DOM，符合组件封装原则；
• 即使用户刷新Home页面，如果URL中带有scrollTo参数，依然能自动滚动到目标元素，体验更完整。

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