Optional Parameters While Routing angular2

Question

How to define optional parameters in routing of angular2.my routing configuration like this:

<a [routerLink]="['../abc',{xyz: blabla}]">
     and 
<a [routerLink]="['../abc']">

{ path: '/abc/:xyz', component: abc, name: 'abc' },  // Here i want xyz as optional perameter

so the problem is whenever i am using first method with parameter blabla it works fine because at the time of routing i have defined parameter xyz but in case of second method i dont want to send parameter so the URL becomes

http://localhost:8080/#/sideNav/abc/

which is laoding first time fine but after refresh page nothing shows whole window is getting blank with no contents. so is there any method to provide optional parameters while routing in angular2.

i have also tried without defining parameters like this

{ path: '/abc', component: abc, name: 'abc' }

but this will throw error in case of value of xyz is 1 it converts 1 into true

Answer 1

You can define multiple routes with and without parameter having the same component:

@RouteConfig([{
  path: '/abc',
  component: Abc,
  name: 'abc'},
{
  path: '/abc/:xyz',
  component: Abc,
  name: 'abcXyz'
}])

and then use the one that you need

<a [routerLink]="['/abcXyz',{xyz: blabla}]">
     and 
<a [routerLink]="['/abc']">

If routeCongig is located in your root file, use / before root's name and if it's on the second level or something, use

<a [routerLink]="['/parentRoot', {parentParams:value}, '/abc']">