Repository navigation
Child aux route cannot be closed by setting outlet to null #15718
Description
I'm submitting a ... (check one with "x")
[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
I have a child aux route:
const routes = [
{
path: 'first',
component: FirstComponent,
children: [
{
path: 'add-groups',
outlet: 'aside',
component: AsideComponent
}
]
];
Aux component has a close button that works only when parent's params are set to navigate method like that:
this.router.navigate([this.route.parent.snapshot.params, {outlets: {aside: null}}]);
and doesn't work like:
this.router.navigate([{outlets: {aside: null}}]);
Expected behavior
Expect this.router.navigate([{outlets: {aside: null}}]); will close the aux
Minimal reproduction of the problem with instructions
https://plnkr.co/edit/kA434H7u5mJbiB7vvkCQ
What is the motivation / use case for changing the behavior?
Use aux routing
Please tell us about your environment:
Mac OS
-
Angular version: 2.0.X
2.4.8 -
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
All -
Language: [all | TypeScript X.X | ES6/7 | ES5]
TypeScript -
Node (for AoT issues):
node --version=
Activity
DrMabuse23 commentedon Dec 13, 2017
my workaround this.router.navigate(['/offer', params.locale, params.slug, params.offerId, { outlets: { offer: null }}], {replaceUrl: true})
[-]Child aux route requires parent' params to be closed[/-][+]Child aux route cannot be closed by setting outlet to null[/+]atscott commentedon May 26, 2020
Updated repro in v9: https://stackblitz.com/edit/angular-ivy-ts4gtn?file=src%2Fapp%2Fapp.component.ts
Additional reproduction from #35732: https://stackblitz.com/edit/angular-ivy-a7zpsa?file=src%2Fapp%2Fapp.component.ts
Related to #13523
Expected behavior documented in https://angular.io/guide/router#clearing-secondary-routes
atscott commentedon Oct 27, 2020
After further investigation, I'm actually going to close this now as a duplicate of #13523. The underlying issues are the same - auxiliary outlets cannot be changed unless the navigation targets the exact segment where the outlet lives.
So in the example here, the outlet "lives" at segment index 1.
this.router.navigate([{outlets: {aside: null}}]);won't work because it "targets" segment index 0.this.router.navigate([this.route.parent.snapshot.params, {outlets: {aside: null}}]);works because the command which targets the outlet is at index 1.Another way to achieve this would be
this.router.navigate([{ outlets: { aside: null } }], {relativeTo: this.route.parent});- that isthis.routeis/first/(aside:add-groups)sothis.route.parentis/first. When using that as therelativeTo, thefirstsegment gets consumed (index 0), then the outlets are processed at the second segment index, soasidecan be cleared.This maybe isn't ergonomic, but it's at least understandable when you know the details about what's happening. It would make sense to work like this if the goal is to avoid accidentally clearing aux outlets that have the same name but are defined at a different depth in the config. It might be a good feature to add an option to ignore aux outlet segment indexes and change them simply based on a name match, regardless of where they are defined.
angular-automatic-lock-bot commentedon Nov 27, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.