How to define default route with parameters in Angular Component Router?

Question

I want to have a default route in my sub-component (set with useAsDefault: true) and to have parameters automatically passed to it. I cannot find anywhere in documentation how to do it. I have a parent component with a following route:

$routeConfig = [
    { path: '/employees/...', component: 'employeesComponent', name: 'Employees'}
]

and a child component with:

$routeConfig = [
    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group', useAsDefault: true}
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'}
]

This of course fails with: Route generator for 'group' was not included in parameters passed. I couldn't figure out how to pass the some default parameters to the first route. I did work arount it by creating yet another route without params, and using that as a default:

{ path: '/all', component: 'employeeListComponent', name: 'All', useAsDefault: true}

but that of course is not ideal. So far, I've not come up with anything better that using route without params, and then immediately redirecting with some default parameters. Isn't there a better way?

I just found out that what I want is an optional route param, and there's and open issue for it: https://github.com/angular/angular/issues/3525 — Tomas Holas, May 02 '16 at 15:23

score 3 · Answer 1 · answered May 02 '16 at 15:37

So I solved my problem in following way: I added a default route without params, and I immediately redirect from $routerOnActivate

public $routeConfig = [
    { path: '/', component: 'employeeListComponent', name: 'GroupRedirect', useAsDefault: true},    
    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group'}
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'},
]

and then in the controller:

public $routerOnReuse(route) {
  if (!route.params.group) {
    this.$router.navigate(['Group', { group: 'status', filter: 'active' }]);
  }
}

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

As far as I know this is not supported. You can have a route with and without the parameter and then in the GroupDefault component just navigate to Group

$routeConfig = [
    { path: '/group', component: 'employeeListComponentDefault', name: 'GroupDefault', useAsDefault: true}

    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group'},
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'}
]

See also

edited May 23 '17 at 12:09

Community

1
1

answered May 02 '16 at 15:08

Günter Zöchbauer

623,577
216
2,003
1,567

I suppose you wanted to say `'/group'`, otherwise there still would be one remaining parameter to fix. – Tomas Holas May 02 '16 at 15:10
Right, I missed that both parts are parameters. – Günter Zöchbauer May 02 '16 at 15:11
Ah, so the idiom is to use optionam parameters. To define a route with `'/`' that can redirect to `'/:group/:filter'` one using some defaults. It is not especially ugly or unperformant, I was just hoping for a more elegant solution. – Tomas Holas May 02 '16 at 15:12
The router is currently reworked and when the basic architecture has settled I'm sure they will eventually add such features, but currently I think they focus on more substantial features (that are not so easy to work around) first. – Günter Zöchbauer May 02 '16 at 15:14

How to define default route with parameters in Angular Component Router?

2 Answers2

Linked