Angular 2 - Why do ActivatedRoute.params returns empty Object

Question

I am trying to access the :id route parameter in a router guard, but for some reason, it always returns an empty Object{}.

Initially I didn't know how to do this, so I used this question to point me in the right direction, however it yields no result. The key difference between that and this is that my issue is in a guard.

This is my route declaration app-routing.module:

const dashboardRoutes: Routes = [
    {
        path: "dashboard/:id",
        component: dashboard.DashboardComponent,
        canActivate: [guard.LoggedInGuard],
        children: [
            {
                path: "",
                redirectTo: "home",
                pathMatch: "full"
            }, 
            ...

And this is my guard existsInDatabase.guard (I tried both params & queryParams):

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
) { }


canActivate() {
    console.log(this.activatedRoute.params);
    this.activatedRoute.params.subscribe(param=> {
        console.log(param); // logs empty Object{}
        console.log(param['id']); // logs undefined
    });
    this.activatedRoute.queryParams.subscribe(param=> {
        console.log(param); // logs empty Object{}
        console.log(param['id']); // logs undefined
    });
    return true;
}

The issue occurs when I try to navigate from

http://localhost:4200/dashboard/136364285

to:

http://localhost:4200/dashboard/136364285/dock/1654321

How do I get 136364285?

I don't have a real solution for this but while you don't have a real answer, maybe you can use "this.router.url.split('/')[4]" to get the id. Hope someone will save you :) — Powkachu
– Powkachu, Commented Apr 25, 2017 at 15:40
@Powkachu Thanks, I am thinking that maybe Günter was right (he deleted his answer) That for some reason the param has not yet been 'integrated' into the router... — Zze
– Zze, Commented Apr 25, 2017 at 23:04

Zze · Accepted Answer · 2017-05-08 22:52:06Z

2

I solved this issue by passing the following through to the canActivatefunction in my guard.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log(route.params['id']); // logs 136364285
    return true;
}

Originally I was getting route: ActivatedRouteSnapshot in the constructor and even though I was using .snapshot, it was not yielding the intended result. No I recieve the route I am about to navigate to and can retrieve params from there.

edited May 8, 2017 at 22:52

answered May 8, 2017 at 8:56

Zze

18.9k14 gold badges95 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 - Why do ActivatedRoute.params returns empty Object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related