I'm having an issue where it appears I can't navigate to a new route, and clear an outlet / secondary route at the same time.
Calling those two actions separately works - but feels like a workaround. Is there good reason why they should be done as two calls? Or is there an error in my implementation? Or should I file it as a GitHub issue?
These work independently:
// Navigate to `/second`
this._router.navigate(['/second']);
// Clears the `popup` outlet
this._router.navigate(['', {outlets: { popup: null }}]);
I thought this should work, but it doesn't clear the outlet:
this._router.navigate(['/second', {outlets: { popup: null }}]);
My current work-around is:
this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } );
I've created a plnkr proof of concept - navigation code is in global-popup.component.ts
The above works when the primary navigation is absolute on the primary route. The problem I am having is: how to do a relative navigation on the primary route, while clearing the secondary route.
I have tried different combinations but none seem to work:
starting at
https://localhost:4200/one/two(popup:some/other)
this.router.navigate([
'',
{
outlets: {
primary: ['areaTwo', 'second'],
popup: null,
},
},
]);
ending at https://localhost:4200/areaTwo/second
So it clears the secondary popup, and it does an absolute navigation.
starting at
https://localhost:4200/one/two(popup:some/other)
this.router.navigate([
{
outlets: {
primary: ['areaTwo', 'second'],
popup: null,
},
},
], { relativeTo: this.activatedRoute });
ending at https://localhost:4200/one/two/areaTwo/second(popup:some/other)
So it does a relative on the primary, but does not clear the secondary.
But how can we do something like:
starting at
https://localhost:4200/one/two(popup:some/other)
ending at https://localhost:4200/one/two/areaTwo/second