I was also facing the same problem. Unfortunately at this time there (still) doesn't seem to be an out-of-the-box solution for this.
I ended up with a little bit of a hacky work around: get the secondary (auxiliary) routes from the url, and add them to the navigate function.
I only had one secondary route called popup, so I created a regex to get the path for the popup router outlet: const POPUP_ROUTE_FROM_URL_REGEX = /\(popup:([^)]+)\)/
.
Then I got the path from the url : const popupRouteResult= POPUP_ROUTE_FROM_URL_REGEX.exec(this.router.url)
. (this.router is injected in the constructor: private router: Router
.) The exec function returns an array where the first item is the full match of the regex (so "(popup:<path...> in this case) and after that the substring matches (so in this case it's only one: "<path...>). so the path of the popup route is in popupRouteResult[1].
In the navigate function you can use it like this:
this.router.navigate(
[
<some path>,
{
outlets: {
// the line below ensures that the (possibly present) popup route is preserved when navigating
...(!!popupRouteResult&& { popup: popupRouteResult[1] }),
},
},
]
);
If you have multiple secondary routes you can adapt the regex to get everything in between the parentheses:
const SECONDARY_ROUTES_FROM_URL_REGEX = /\(([^)]+)\)/;
const secondaryRoutesResult = SECONDARY_ROUTES_FROM_URL_REGEX .exec(this.router.url);
For the example in the question secondaryRoutesResult[1]
will give you "p1: .... // p2: .... // p3: ..."
.
You can split this string on // to get each individual outlet path: const outlets = secondaryRoutesResult[1].split('//
), which will result in:
["p1: .... ", " p2: .... ", " p3"]`. It's propably wise to check first if secondaryRoutesResult[1] exists.
Then you can loop over the outlets:
const outletsData = {outlets: {}};
outlets.forEach(outlet => {
// split by : to get the name of the outlet and the path separated
const splitOutlet = outlet.split(":");
const name = splitOutlet[0];
const path = splitOutlet[1];
outletsData[name] = path
});
And you can use this data in your navigate function:
this.router.navigate([<some path>, outletsData]);
Hopefully this answer will help someone who stumbles onto the same problem! I hope to see an update in angular so this hack is no longer necessary and there is just a property you can use.