Angular routerLink无法拼接参数：SpringBoot部署下路由缺失itemId

这种仅在SpringBoot部署环境下出现的路由参数丢失问题，大概率和Angular路由的绑定方式、部署配置有关，下面是几个常见的排查方向和解决办法：

1. 改用Angular推荐的RouterLink数组绑定写法 #

你当前使用的是字符串插值方式拼接路由：

routerLink='/hospital/{{result.itemId}}'

这种写法在部分部署场景下（比如SpringBoot处理静态资源时）可能出现解析异常，Angular官方更推荐使用数组形式的绑定，它能更可靠地处理路由参数：

<!-- 医院类型路由 -->
<div [routerLink]="['/hospital', result.itemId]">
<!-- 病房类型路由 -->
<div [routerLink]="['/ward', result.itemId]">
<!-- 医护人员类型路由 -->
<div [routerLink]="['/medic', result.itemId]">

数组形式会让Angular的路由模块自动处理参数的拼接和编码，避免字符串插值可能带来的解析问题。

2. 检查Angular构建时的base-href配置 #

当把Angular项目部署到SpringBoot这类后端服务中时，需要确保构建时指定了正确的base-href，否则路由的基准路径可能出错，导致参数无法正确拼接。

执行构建命令时加上--base-href参数（如果部署在根路径）：

ng build --prod --base-href /

如果你的Angular项目部署在SpringBoot的子路径下（比如/app/），则对应调整：

ng build --prod --base-href /app/

同时要确保index.html中的<base href>标签和构建参数一致。

3. 验证SpringBoot的前端路由 fallback 配置 #

Angular是单页应用，所有前端路由需要由Angular自身处理，而SpringBoot的DispatcherServlet默认会拦截所有请求。如果没有配置正确的fallback，可能会导致路由参数被后端错误解析。

可以在SpringBoot中添加一个控制器，将所有前端路由请求转发到index.html：

@Controller
public class ForwardController {
    @GetMapping(value = "/**/{path:[^.]*}")
    public String forward() {
        return "forward:/index.html";
    }
}

这个配置确保所有非静态资源的请求都交给Angular处理，避免后端干扰前端路由的参数解析。

4. 确认SessionStorage中itemId的类型 #

虽然你提到数据解析和展示正常，但可以额外检查result.itemId的类型是否为字符串。如果itemId是数字类型，在某些情况下拼接路由时可能出现隐式转换问题，建议显式转换为字符串：

// 在组件中统一转换itemId类型
results = JSON.parse(<string>sessionStorage.getItem("lastSearch"))?.map(item => ({
  ...item,
  itemId: String(item.itemId)
})) || [];

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