如何在不触发路由跳转的前提下更新Angular Router的navigation extras

你之前的代码触发空白页的核心原因是：调用router.navigate([], navigationExtras)时没有指定relativeTo参数，Angular会默认将空路径解析为站点根路径，若根路径未匹配到对应路由组件就会出现空白。

以下是两种可用的实现方案：

方案1：使用Location服务直接更新历史状态（更轻量） #

这个方案直接操作浏览器History API，完全不会触发路由导航流程、不会触发任何路由生命周期，性能开销最低。

1. 先导入并注入Location服务：

import { Location } from '@angular/common';

constructor(private location: Location) {}

2. 提交表单时更新state：

onFormSubmit(formValue: any) {
  // 获取当前已存在的路由state
  const currentState = this.location.getState() as Record<string, any>;
  // 合并新的email字段
  const updatedState = {
    ...currentState,
    email: formValue.email
  };
  // 替换当前历史记录的state，路径保持当前页不变
  this.location.replaceState(window.location.pathname, '', updatedState);
}

方案2：使用Router.navigate兼容路由事件逻辑 #

如果你项目中有依赖路由导航事件的业务逻辑，可以用这个方案，只要补充缺失的配置项即可避免空白页：

1. 导入并注入ActivatedRoute：

import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

2. 提交表单时更新state：

onFormSubmit(formValue: any) {
  const navigationExtras: NavigationExtras = {
    // 指定相对当前路由导航，空路径就表示停在当前页
    relativeTo: this.route,
    // 替换当前历史记录，不会产生多余的可后退条目
    replaceUrl: true,
    state: {
      ...this.route.snapshot.state,
      email: formValue.email
    }
  };
  this.router.navigate([], navigationExtras);
}

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