Zze Zze - 4 months ago 32
TypeScript Question

Angular 2 - Why do ActivatedRoute.params returns empty Object

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
?

Zze Zze
Answer Source

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.