Angular路由无法传递ID：链接ID未转发、刷新后userid丢失

开发者阿泽

2026-5-21

解决Angular路由无法传递ID的问题

看起来你遇到的是Angular路由里很常见的参数传递误区——用原生HTML的href属性跳转导致变量无法解析、刷新后参数丢失，我来一步步帮你搞定它！

问题根源

你现在用的href是原生跳转方式，Angular不会处理里面的${id}模板变量，它会被直接当成字符串编码后拼到URL里，变成http://localhost:4200/user/products/$%7Bid%7D（%7B和%7D是{}的URL编码）。而且原生href会触发整页刷新，组件里的userId变量会被重置，自然没法传递值了。

解决方案：改用Angular的`routerLink`指令

Angular提供了专门的routerLink路由导航指令，它能正确解析模板变量，且属于单页应用内部导航，不会刷新整个页面。

1. 修改Navbar组件的模板代码

把下拉菜单里的跳转链接改成[routerLink]绑定，数组形式的第一个元素是路由路径，第二个元素就是要传递的ID参数。结合你的代码，修改后如下：

<li class="nav-item dropdown" >
  <a class="nav-link dropdown-toggle" 
     *ngIf="!!authService.isLoggedIn_()" 
     routerLink="#" 
     id="navbarDropdownMenuLink" 
     data-toggle="dropdown" 
     aria-haspopup="true" 
     aria-expanded="false">
    My profil
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <!-- 跳转产品页的链接：用routerLink绑定ID参数 -->
    <a class="dropdown-item" 
       [routerLink]="['/user/products', userId]">
      My Products
    </a>
  </div>
</li>

注意：这里的userId要和你组件类中定义的变量名完全一致，确保它是已经获取到的有效ID值。

2. 确保路由配置里定义了参数占位符

在app-routing.module.ts中，需要为目标路由添加参数占位符:id，让Angular识别并传递这个参数：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { YourProductsComponent } from './path-to-component/your-products.component';

const routes: Routes = [
  // 其他路由配置...
  { path: 'user/products/:id', component: YourProductsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 在目标组件中获取路由参数

在接收ID的组件（比如YourProductsComponent）里，通过ActivatedRoute获取参数，即使页面刷新也能拿到值：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-products',
  templateUrl: './your-products.component.html',
  styleUrls: ['./your-products.component.css']
})
export class YourProductsComponent implements OnInit {
  userId: string | null = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅paramMap变化，确保刷新或参数更新时能拿到最新值
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
      // 这里可以写根据userId加载数据的逻辑
      if (this.userId) {
        // 处理业务逻辑，比如请求用户产品列表
      }
    });
  }
}

为什么这样能解决问题？

[routerLink]是Angular原生指令，会自动解析数组里的变量，把userId的值拼到URL里，生成正确的路径（比如/user/products/123）。
内部导航不会刷新整个应用，组件状态得以保留；即使刷新页面，ActivatedRoute依然能从URL里解析出ID参数，不会丢失。

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