Angular中如何不刷新页面修改URL中的路由参数？

要实现不刷新页面修改路由里的:lang参数，你可以通过Angular Router的navigate方法，基于当前路由状态更新参数，具体修改如下：

1. 更新DashboardComponent的changeLang方法 #

直接在方法里切换语言参数，并保持当前的子路由（比如dashboard）不变：

changeLang() {
  // 获取当前路由的语言参数
  const currentLang = this.router.routerState.snapshot.root.firstChild?.paramMap.get('lang');
  // 切换语言（示例：en ↔ zh）
  const newLang = currentLang === 'en' ? 'zh' : 'en';

  // 导航到新的路由，保持子路由路径
  this.router.navigate([newLang, 'dashboard'], {
    replaceUrl: true // 可选：替换当前历史记录，避免回退时重复旧路由
  });
}

如果想更灵活（不硬编码dashboard），可以动态获取当前子路由路径：

changeLang() {
  const parentRoute = this.router.routerState.snapshot.root.firstChild;
  const currentLang = parentRoute?.paramMap.get('lang');
  const newLang = currentLang === 'en' ? 'zh' : 'en';
  // 获取当前子路由的路径片段
  const childPathSegments = parentRoute?.firstChild?.url.map(seg => seg.path) || [];

  this.router.navigate([newLang, ...childPathSegments], { replaceUrl: true });
}

2. 让组件响应语言参数变化（可选） #

如果需要组件在语言参数变化时执行逻辑（比如切换国际化资源），可以注入ActivatedRoute并订阅参数变化：

import { ActivatedRoute } from '@angular/router';
// ...
export class DashboardComponent {
  router = inject(Router);
  route = inject(ActivatedRoute);

  ngOnInit() {
    // 订阅语言参数变化
    this.route.parent?.paramMap.subscribe(params => {
      const lang = params.get('lang');
      console.log('当前语言已切换为:', lang);
      // 这里可以添加语言切换的业务逻辑
    });
  }

  changeLang() {
    // 上述的切换代码
  }
}

原理说明：Angular Router的navigate方法会更新浏览器地址栏的路由信息，但不会触发页面刷新；路由参数变化时，只要组件订阅了paramMap，就能实时响应并执行对应逻辑。

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