0

I have a component that receives an event from a child component, like so:

<my-component (dataOutput)="route($event)"></my-component>

In my function route I would like to route to a url that contains the URL I'm currently on, PLUS the auxiliary route which shows an overlay with some data received by the output event. I've attempted the below which doesn't work

const url = ['albums', albumId];
const outlet = { outlets: { artistEditor: ['artist', artistId] } }
this.router.navigate(url, outlet);

If I route to just { outlets: { artistEditor: ['artist', artistId] } }, the application cannot find the route. Although, as a side note, if I wrote it in HTML it navigates correctly with a test button like so:

<a [routerLink]="[{ outlets: { artistEditor: ['artist', 'artistId'] } }]" >New</a>

What's the best way to programmatically route to an auxiliary route, ensuring the URL that I defined is also adhered to?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Que
  • 957
  • 2
  • 14
  • 35
  • so `router.navigate([{ outlets: { artistEditor: ['artist', artistId] } }]);` doesn't work? – Nathan T. Apr 24 '23 at 13:30
  • Hey Nathan - That's correct. The following error fires in the console: "ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'artist/id'" - The correct ID appears at least. – Que Apr 24 '23 at 13:32
  • could you give a small reproducible example in stackblitz – Nathan T. Apr 24 '23 at 13:59
  • Unfortunately probably not. There are a few moving parts with child components (referenced in the main post) that I'd probably take longer setting it up to match haha. Not sure how the HTML on the same page can link correctly, but the typescript can't. – Que Apr 24 '23 at 14:46

1 Answers1

0

I managed to get this working by using navigateByUrl

const url = ['albums', albumId];
const routeWithAux = url + ('(artistEditor:artist/' + artistId + ')');
this.router.navigateByUrl(routeWithAux);
    ```
Que
  • 957
  • 2
  • 14
  • 35