Repository navigation
Navigating with outlets is confusing: outlets map does not apply to consumed segments #13523
Description
I'm submitting a ...
[X] bug report
Current behavior
I have some routes like:
const routes = [
{ path: "", component: HomeComponent, pathMatch: "full" },
{ path: "profile", component: ProfileComponent },
{ path: "menu", component: MenuComponent, outlet: "sidebar" },
];When the route http://localhost/(sidebar:menu) is open, then I'm able to remove the named outlet and go to http://localhost/ by clicking an anchor like the following:
<a [routerLink]="['', {outlets: {sidebar: null}}]">
Close
</a>What doesn't work is navigating away from the sidebar and also going to another route like http://localhost/profile.
<a [routerLink]="['/profile', {outlets: {sidebar: null}}]">
Close
</a>The link that is rendered is http://localhost:3971/profile(sidebar:menu)
Expected behavior
The link that should be rendered is http://localhost:3971/profile.
Repro
https://github.com/tinchou/router-repro
Please tell us about your environment:
Windows 10, Visual Studio 2017
-
Angular version: 2.3.1 (didn't work with 2.1.0 either)
-
Browser: all
-
Language: TypeScript 2.0.10
Activity
colltoaction commentedon Dec 16, 2016
Update:
Router.navigatedoesn't work either. E.g. the following doesn't work:Workaround: add a click handler and call navigate a second time, but only after the first one completes.
vicb commentedon Dec 16, 2016
Please provide a quick repro. Thanks.
colltoaction commentedon Dec 16, 2016
Created a new project with the latest cli and then added the components as explained above. Please take a look: https://github.com/tinchou/router-repro.
EDIT
Just tried to use
ng github-pages:deploybut it fails trying to rungit rm -r. Anyway, I copied the contents from/distand deployed them manually, and here's a live demo!https://tinchou.github.io/router-repro/
vicb commentedon Dec 16, 2016
👍
wKoza commentedon Dec 16, 2016
In the vsavkin's book, he says :
`We can also remove segments by setting them to ‘null’.
router.navigate([{outlets: {popup: null}}])`
But he never set a path and a outlet. In this case, we can use
<a [routerLink]="[{outlets: {primary: 'profile',sidebar: null}}]">
If it can help
colltoaction commentedon Dec 16, 2016
@WilliamKoza it seems to work using the
primaryoutlet. Now I found it in the docs and it makes sense:This works perfect for me, thanks a lot (but I believe the issue still stands).
Just one gotcha: in my real application it only works if specifying an empty string as the first parameter
<a [routerLink]="['', {outlets: {primary: 'profile', sidebar: null}}]">nischi commentedon May 16, 2017
same issue here. i try to close the a modal window. I have a outlet called "modal" and there i load my modal window component. If i want to close it (without knowing where i'm) with modal: null it routes to the modal again.
ragv1 commentedon Jul 2, 2017
same issue. i have a named outlet call popup, just like in the docs. when i try to close it with:
this.router.navigate([{ outlets: {popup: null }}]);It just does nothing.
Almar commentedon Jul 21, 2017
@ragv1, have you tried
this.router.navigate(['', { outlets: {popup: null }}]);?27 remaining items
feat(router): add `relativeTo` as an input to `routerLink` (#39720)
docs(router): Clarify how to clear secondary routes
atscott commentedon May 24, 2021
Closed by #40272
angular-automatic-lock-bot commentedon Jun 24, 2021
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.
docs(router): Clarify how to clear secondary routes
docs(router): Clarify how to clear secondary routes (#51376)
docs(router): Clarify how to clear secondary routes (#51376)
docs(router): Clarify how to clear secondary routes (angular#51376)