Angular Navigating to Secondary Route while Preserving Primary Route

Question

I would like to navigate to a secondary route called modal without explicitly stating the primary route.

I've tried this in the component class:

onclick(){
    this.router.navigate([{ outlets: { foo: 'modal' } }], { relativeTo: this.route });
}

The above code seems to work. However, it navigates to /first(foo:modal) for a split second then it navigates to the root /.

What am I doing wrong?

It would be nice to do something like:

<a href="#" routerLink="/*(foo:modal)">Open Modal</a>

So that it matches any primary route.... Is this possible?

Answer 1

You can set only the secondary segment by specifying the outlet { oultletName: url}

<a [routerLink]="[{outlets: { modal: 'edit/20']}}]">Edit</a>   
router.navigate([{outlets: { modal: 'edit/20'}}]);

or multiple segments:

<a [routerLink]="[{outlets: {primary: 'products', modal: 'edit/20']}}]">Edit</a> 
router.navigate([{outlets: {primary: 'products', modal: 'edit/20'}}]);