Angular 16中已在电影详情页时无法跳转至其他电影详情页的问题

我正在开发一个基于Angular 16、TypeScript和TMDB（电影数据库）的SPA应用，实现电影搜索功能时遇到异常：

• 在app\services\movie-service.service.ts中实现了搜索电影的服务方法，TopBarComponent调用该方法实现防抖搜索
• 模板中通过routerLink将搜索结果的电影项链接至/movie/{{ movie.id }}路由（对应MovieDetailsComponent）
• 路由配置已正确定义movie/:id路径，但处于电影详情页时，点击搜索结果中的电影项无法跳转；在其他页面时跳转功能正常

1. 问题根源 #

当当前路由为/movie/:id时，Angular的routerLink默认会以当前路由为基准解析相对路径。比如当前在/movie/123，点击routerLink="/movie/456"时，Angular会错误地解析为/movie/123/movie/456，这并非预期的目标路由，导致跳转失败。

2. 可靠修复方式 #

推荐以下两种方案，优先选择第一种：

方案一：使用数组形式的绝对路由（Angular最佳实践） #

将模板中的字符串拼接式routerLink修改为数组形式，强制Angular解析为绝对路由：

<a [routerLink]="['/movie', movie.id]">
  <!-- 电影项内容 -->
</a>

数组形式的routerLink避免了相对路径的歧义，同时也消除了字符串拼接可能带来的语法错误，是最简洁可靠的解决方式。

方案二：指定路由相对根路径 #

如果需要保留字符串形式，可以通过relativeTo参数明确指定相对于根路由：

1. 在TopBarComponent中注入ActivatedRoute：

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

constructor(private route: ActivatedRoute) {}

2. 修改模板中的routerLink：

<a routerLink="/movie/{{ movie.id }}" [relativeTo]="route.root">
  <!-- 电影项内容 -->
</a>

通过route.root指定相对根路由解析，确保跳转路径正确。

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