Angular路由点击电影图片跳转仅单个:id不加载新影片问题

问题根源 #

现象由两个问题叠加导致：

• 路由跳转使用相对路径，路径会在当前路由层级后叠加，因此需要配置多段id路由才能匹配不同层级的跳转路径
• 详情组件未监听路由参数变化，路由地址更新后组件复用，不会重新触发数据请求导致内容不刷新

修复步骤 #

1. 调整路由配置 #

统一详情页路由为固定前缀的单段参数形式，既规范也避免和其他路由冲突，无需再配置多段id路由：

const routes: Routes = [
  {path: "", redirectTo:"home", pathMatch:"full"},
  {path: "home", component: HomeComponent},
  // 仅保留这一条详情页路由即可
  {path: "movie/:id", component: OverviewComponent},
  {path: "**", redirectTo:"home"}
];

2. 修改跳转链接为绝对路径 #

给routerLink加上/前缀走绝对路径，不会再出现路径叠加的问题：

<div class="img carousel-cell" *ngFor="let m of movies.results">
  <img
    routerLink="/movie/{{ m.id }}"
    src="https://image.tmdb.org/t/p/w200{{ m?.poster_path }}"
    alt="{{ m.title }}"
  />
</div>

3. 详情组件监听路由参数变化 #

路由参数更新时如果组件复用，ngOnInit只会触发一次，需要订阅参数变化主动拉取新数据：

// OverviewComponent 示例代码
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

export class OverviewComponent implements OnInit, OnDestroy {
  private paramSub: Subscription;

  constructor(private route: ActivatedRoute, private tmdb: TmdbService) {}

  ngOnInit(): void {
    this.paramSub = this.route.params.subscribe(params => {
      const movieId = params['id'];
      // 用新的id请求对应影片数据
      this.tmdb.getMovieById(movieId).subscribe(res => {
        // 赋值渲染页面
        this.movieInfo = res;
      })
    })
  }

  ngOnDestroy(): void {
    // 取消订阅避免内存泄漏
    this.paramSub?.unsubscribe();
  }
}

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