Angular Navigating to Secondary Route while Preserving Primary Route

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?