ActivatedRoute.snapshot.paramMap not working

Question

I trying to get a route param on startup/initial route. But it is not working.

app.component.ts

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

  constructor(
    private activatedroute: ActivatedRoute
  ) {}

  ngOnInit() {
    console.log(this.activatedroute.snapshot.paramMap.get('token'));

    this.activatedroute.paramMap.subscribe( paramMap => {
      console.log(paramMap.get('token'));
    });
  }

app.module.ts (includes more than just this though)

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: ':token', component: HelloComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Then I serve my app and go to:

http://localhost:4200/123

But my app.component.ts just console.log's null null. Why is this not working? I feel like I have everything correct. Here is an Angular Blitz to work with: https://stackblitz.com/edit/angular-wnrrkd

score 5 · Accepted Answer · answered Mar 25 '20 at 06:27

5

you have written the code in app.component.ts which is the root component, but the :token is defined for the child component, so I have moved the code to the child component, one more thing to note is that in app.component.html you need to have router outlet which will display the child component, only then the token will be visible, please refer the below example.

Stackblitz example

answered Mar 25 '20 at 06:27

Naren Murali

19,250
3
27
54

Ok awesome thank you. You solved my question perfectly. But my problem is that I need to "parameter check" to happen at parent level. Could you help me change my code so that I can get the "token" at the parent level please? I can't re-use this code in every single child. Would it work if I put the "token" parameter first at every route or something? So the routes would be `url/(token)/child1/child2` – Frank Mar 25 '20 at 06:42
@Frank Would suggest you to move the common code to a service and then pass the activated route as a parameter to the service function! this way you can reuse as well as reduce code complexity – Naren Murali Mar 25 '20 at 06:48
But then I would have to do this `pass the activated route as a parameter to the service function` in every single child? – Frank Mar 25 '20 at 06:49
@Frank Is there any major impact in that? – Naren Murali Mar 25 '20 at 06:50
The project might have 50 children at some point. Pasting a piece of code (even if it is just one line) 50 times isn't very great. Also, every new develop needs to know they have to add this line to any new children they make. – Frank Mar 25 '20 at 06:55
@Frank I am not able to find a feasible solution for this scenario. this will introduce unnecessary complexity in my opinion, sorry – Naren Murali Mar 25 '20 at 08:45
Thank you so much! adding the fixed my problem! I had no idea I had to add the router-outlet for this to work – Sarah Jul 06 '20 at 09:59

score 0 · Answer 2 · answered Oct 22 '21 at 09:59

0

try this:

this.router.parseUrl(this.router.url).queryParams['coupon']

answered Oct 22 '21 at 09:59

Temo Kiknadze

269
3
8

ActivatedRoute.snapshot.paramMap not working

2 Answers2