问题
I'm trying to use auxiliary routes to show different content in a sidebar, depending on which route you're on.
The problem is that the auxiliary route remains (both in URL and the content) after navigating away.
The HTML:
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>
The RouteConfig:
@RouteConfig([
{path: '/', name: 'Home', component: Home, useAsDefault: true},
{path: '/leadslist', name: 'LeadsList', component: LeadsList},
{aux:'/sidebar', name: 'Sidebar', component: Sidebar}
])
The links in the navbar:
<a [routerLink]="['Home']">Home</a>
<a [routerLink]="['LeadsList', ['Sidebar']]">Leads list</a>
Current Behaviour:
- From the home page, I click the link "Leads list".
- I am redirected to the route "/leadslist(sidebar)" and the sidebar content is properly loaded in its router outlet. All good so far.
- If I now click the link "Home" to take me back to "/", the URL is instead "/(sidebar)", which takes me back to the home page but with the sidebar loaded (unwanted behaviour!)
My question: How can I navigate to a route without the auxiliary route "tagging along"?
回答1:
Currently (imho) this could be handled better in the Angular2 router, but what you need to do is set your aux outlet to null and point the primary outlet with the url you want to go back to.
This works because primary is a reserved default outlet for angular2.
Consider the following route: /inbox/123131$asd(compose:reply)
In the above route we were viewing an email and composing a reply. So - when we send this we might want the user to get sent back to the main view - the inbox. Then your routerLink would need to look like the following:
<a [routerLink]="['',{outlets: {compose: null, primary: '/inbox'}}]" >Close</a>Be wary that this might be subject to change in the third rewrite of the Angular2 router.
来源：https://stackoverflow.com/questions/36325376/auxiliary-routes-in-angular-2-remains-in-the-url-after-navigating-away