How to change only the aux: outlet in Angular2 Router@3 (Vladivostok)

Question

I have a users table. When I click a user, I want a modal with some of their data up there. How do I trigger the route change only for the aux router? And how would I do that in the first place, anyway?

What I want is essentially to go from:

/users

to

/users(aux:/user:12345)

(12345 would be the userId here.)

Preferably I want to navigate without page reload, of course :)

How would I link to this via [routerLink] attribute, and how via manually calling router.navigate?

Answer 1

Your router config:

...
{ path: 'user/:id', component: UsersComponent, outlet: 'aux' }
...

Using routerLink:

<a [routerLink]="[{ outlets: { 'aux': ['user', '12345'] } }]">
  Component Aux
</a>

From the component:

this.router.navigate([{outlets: {aux: 'user/12345'}}]);