Handle Routes with QueryParam in Angular2

Question

I have two routes in my appilcation

{path: 'activity/?cInfo=askjdfkajsdfkasd', component: PostComponent},
{path: 'activity/:id', component: PostDetailComponent}

What i have to do to make them work?

Route with querystring ?cInfo=askjdfkajsdfkasd should go to PostComponent

and Route like activity/skjdfhakjdfhaajsdf should go to PostDetailComponent

i tried

{path: 'activity/?cInfo=askjdfkajsdfkasd', component: PostComponent,canActivate:[CheckForListPage],pathMatch:'full'},
{path: 'activity/:id', component: PostDetailComponent,canActivate:[CheckForDetailPage]}

but each time 1 is called. The guards are returning boolean.

Does angular differentiate between queryParams and pathVariables like most MVC do?

Answer 1

I think you must declare your routes in this way.

{path: '/activity', component: PostComponent,canActivate:[CheckForListPage]},
{path: '/activity/:id', component: PostDetailComponent,canActivate:[CheckForDetailPage]}

So, when you navigate to /activity?cInfo=askjdfkajsdfkasd the router will match with the first defined route (/activity), and then you can retrieve the queryParameters passed to the route inside the component (PostComponent).

ngOnInit(): void {
    this.route.queryParams
        .subscribe(params => {
          // complete params object
          console.log(params);

          // your param passed 
          console.log(params['cInfo'])
        });
}

Of course you need import @angular/route ActivatedRoute

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

And set route in your constructor as a property of type ActivatedRoute before the first code snippet (which should be in ngOnInit method of your component class, which means your component class must implements OnInit from @angular/core).

constructor(
    private route     : ActivatedRoute
){}