Angular 15中ActivatedRoute snapshot paramMap.get('id')返回null求助

你的问题根源在路由配置里——pokemon/:id 后面多了个空格！Angular的路由匹配是严格的，这个空格会导致URL里的/pokemon/4和路由规则不匹配，自然拿不到id参数。

第一步：修正路由配置 #

把app-routing.module.ts里的路由规则改了，去掉:id后面的空格：

const routes: Routes = [
  { path: 'pokemons', component: ListPokemonComponent },
  { path: 'pokemon/:id', component: DetailPokemonComponent }, // 移除了:id后的空格
  { path: '', redirectTo: 'pokemons', pathMatch: 'full' }
];

第二步：修复组件代码并优化参数处理 #

你原来的组件代码漏了类定义，而且pokemon.id是数字类型，paramMap.get('id')返回的是字符串，建议显式转换类型，用===匹配更严谨：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { POKEMONS } from '../mock-pokemon-list';
import { Pokemon } from '../pokemon';

@Component({
  selector: 'app-detail-pokemon',
  templateUrl: './detail-pokemon.component.html',
})
export class DetailPokemonComponent implements OnInit {
  pokemonList: Pokemon[] = [];
  pokemon?: Pokemon;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.pokemonList = POKEMONS;
    const pokemonId = this.route.snapshot.paramMap.get('id');
    
    if (pokemonId) {
      const id = Number(pokemonId);
      this.pokemon = this.pokemonList.find(pokemon => pokemon.id === id);
    }
  }
}

如果后续遇到同一组件内路由参数更新不及时的情况（比如从/pokemon/4跳转到/pokemon/5），可以改用订阅路由参数的方式：

ngOnInit() {
  this.pokemonList = POKEMONS;
  this.route.paramMap.subscribe(params => {
    const pokemonId = params.get('id');
    if (pokemonId) {
      const id = Number(pokemonId);
      this.pokemon = this.pokemonList.find(pokemon => pokemon.id === id);
    }
  });
}

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