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: github.com/angular/angular/issues/3525 — Tomas Holas
– Tomas Holas, Commented May 2, 2016 at 15:23

Tomas Holas · Accepted Answer · 2016-05-02 15:37:54Z

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' }]);
  }
}

Community · Accepted Answer · 2017-05-23 12:09:46Z

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'}
]

4 Comments

Tomas Holas Over a year ago

I suppose you wanted to say '/group', otherwise there still would be one remaining parameter to fix.

Günter Zöchbauer Over a year ago

Right, I missed that both parts are parameters.

Tomas Holas Over a year ago

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.

Günter Zöchbauer Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related