Angular 16路由参数snapshot失效问题及可靠替代方案

问题原因 #

你使用activatedRoute.snapshot.paramMap.get('id')获取的是组件初始化时的参数快照。当在同一个MoviesByGenre组件内导航（比如从/by-genre/12跳转到/by-genre/18），Angular不会销毁重建组件，ngOnInit只会执行一次，快照里的参数不会更新，导致后续请求始终使用旧的genre_id，新数据自然无法加载。

修复方案（最简单可靠的方式） #

改用ActivatedRoute.paramMap的Observable监听参数变化，只要URL参数更新，就自动触发数据重新加载。同时优化请求逻辑，避免重复调用接口，并处理订阅的内存泄漏问题。

修改后的组件代码 #

import { Component, OnDestroy, OnInit } from '@angular/core';
import { GenreResponse, Genre } from '../../models/Genre';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subject, switchMap, takeUntil, tap } from 'rxjs';

@Component({
  selector: 'app-movies-by-genre',
  templateUrl: './movies-by-genre.component.html',
  styleUrls: ['./movies-by-genre.component.scss']
})
export class MoviesByGenre implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  public genreName: string | undefined = '';
  public movies: Movie[] | undefined = [];
  public genres: Genre[] | undefined = [];

  constructor(
    private activatedRoute: ActivatedRoute,
    private movieService: MovieService
  ) { }

  ngOnInit() {
    // 一次性获取所有电影类型，避免重复请求接口
    this.movieService.getAllMovieGenres()
      .pipe(takeUntil(this.destroy$))
      .subscribe(response => {
        this.genres = response.genres;
      });

    // 监听URL参数变化，自动更新数据
    this.activatedRoute.paramMap
      .pipe(
        takeUntil(this.destroy$),
        // 更新类型名称
        tap((params: ParamMap) => {
          const genre_id = Number(params.get('id'));
          if (this.genres?.length) {
            const currentGenre = this.genres.find(genre => genre.id === genre_id);
            this.genreName = currentGenre?.name || '';
            this.movieService.defaultTitle = this.genreName;
          }
        }),
        // 参数变化时重新请求对应类型的电影
        switchMap((params: ParamMap) => {
          const genre_id = Number(params.get('id'));
          return this.movieService.getMoviesByGenre(genre_id);
        })
      )
      .subscribe(response => {
        this.movies = response.results;
      });
  }

  ngOnDestroy() {
    // 组件销毁时取消所有订阅，防止内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

关键优化点 #

• 替换快照为paramMap Observable，实时监听URL参数变化
• 电影类型列表只在初始化时请求一次，减少不必要的接口调用
• 使用takeUntil+Subject管理订阅，组件销毁时自动清理订阅，避免内存泄漏
• 用switchMap合并参数流与电影数据请求流，逻辑更简洁

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