Angular 1 component router query params

Question

I'm using angular 1 with new component router. I have $routeConfig like this:

{ path: '/list', name: 'ListCmp', component: 'listCmp', useAsDefault: true }

I want to navigate to this component with custom query params.

$router.navigate(['ListCmp', {itemId: 1, name: 'prop1'}]);

After navigating I get this Url: localhost/list;name=1;prop1 The problem is what I have a lot of places where I use $location.search(), but this method can't parse url with semicolon separated values. How can I make this new router to generate old style query params like:

localhost/list?name=1&prop1

Answer 1

Because ListCmp is a child route of another component, parameters will be generated in the matrix format, not the query format. You can read more about matrix params vs query params here.

What it essentially means "is that matrix parameters apply to a particular path element while query parameters apply to the request as a whole".

Regarding your problem, do you have to use $location.search()? You can use the $routerOnActivate lifecycle hook and access the parameters there within your ListCmp.