Angular 15 Activated Route snapshot params get () returns null?-CodePudding

I'm new in Angular and i'm blocked since two days. The command "const pokemonId: string|null = this.route.snapshot.paramMap.get('id');" returns null to pokemonId but normally it gives me the string from the URL (http://localhost:4200/pokemon/4) like here "4"

detail-pokemon.component.ts :


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',
  
})


constructor (private route: ActivatedRoute,  ){}
ngOnInit()  {

this.pokemonList = POKEMONS;

 const pokemonId: string|null = this.route.snapshot.paramMap.get('id');

 if (pokemonId) {
 
 this.pokemon = this.pokemonList.find(pokemon => pokemon.id == pokemonId)}}}

app-routing.module.ts
const routes: Routes = [
  { path: 'pokemons',component: ListPokemonComponent },
  {path : 'pokemon/:id ', component: DetailPokemonComponent},
  {path: '', redirectTo : 'pokemons', pathMatch: 'full'}
];

I tried with getAll and all proposed solutions for situation looking like mine .

CodePudding user response：

Instead of using paramsMap try this

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

        private route: ActivatedRoute

      ) {}
    
    **const pokemonId: string|null=this.route.snapshot.params.id**

CodePudding user response：

You need to remove the space after :id inside your path. So change:

'pokemon/:id '
            _

To:

'pokemon/:id'