Angular中的辅助路线 2 导航离开后仍留在url中
Auxiliary routes in Angular 2 remains in the url after navigating away
我正在尝试使用辅助路线在边栏中显示不同的内容,具体取决于您所在的路线。
问题是导航离开后辅助路线仍然存在(在URL和内容中)。
HTML:
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>
路由配置:
@RouteConfig([
{path: '/', name: 'Home', component: Home, useAsDefault: true},
{path: '/leadslist', name: 'LeadsList', component: LeadsList},
{aux:'/sidebar', name: 'Sidebar', component: Sidebar}
])
导航栏中的link:
<a [routerLink]="['Home']">Home</a>
<a [routerLink]="['LeadsList', ['Sidebar']]">Leads list</a>
当前行为:
- 在主页上,我单击 link "Leads list"。
- 我被重定向到路由“/leadslist(sidebar)”并且侧边栏内容已正确加载到其路由器插座中。目前一切顺利。
- 如果我现在单击 link "Home" 将我带回“/”,则 URL 将变成“/(边栏)”,这会将我带回主页但加载了侧边栏(不需要的行为!)
我的问题:没有辅助路线如何导航到路线"tagging along"?
目前(恕我直言)这可以在 Angular2 路由器中得到更好的处理,但您需要做的是将 aux
插座设置为 null
并将 primary
插座指向您要返回的 url。
之所以有效,是因为 primary
是 angular2 的保留默认出口。
考虑以下路线:/inbox/123131$asd(compose:reply)
在上面的路线中,我们正在查看电子邮件并撰写回复。所以 - 当我们发送这个时,我们可能希望用户被发送回主视图 - 收件箱。那么您的 routerLink 需要如下所示:
<a [routerLink]="['',{outlets: {compose: null, primary: '/inbox'}}]" >Close</a>
请注意,这可能会在 Angular2 路由器的第三次重写中发生变化。
我正在尝试使用辅助路线在边栏中显示不同的内容,具体取决于您所在的路线。
问题是导航离开后辅助路线仍然存在(在URL和内容中)。
HTML:
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>
路由配置:
@RouteConfig([
{path: '/', name: 'Home', component: Home, useAsDefault: true},
{path: '/leadslist', name: 'LeadsList', component: LeadsList},
{aux:'/sidebar', name: 'Sidebar', component: Sidebar}
])
导航栏中的link:
<a [routerLink]="['Home']">Home</a>
<a [routerLink]="['LeadsList', ['Sidebar']]">Leads list</a>
当前行为:
- 在主页上,我单击 link "Leads list"。
- 我被重定向到路由“/leadslist(sidebar)”并且侧边栏内容已正确加载到其路由器插座中。目前一切顺利。
- 如果我现在单击 link "Home" 将我带回“/”,则 URL 将变成“/(边栏)”,这会将我带回主页但加载了侧边栏(不需要的行为!)
我的问题:没有辅助路线如何导航到路线"tagging along"?
目前(恕我直言)这可以在 Angular2 路由器中得到更好的处理,但您需要做的是将 aux
插座设置为 null
并将 primary
插座指向您要返回的 url。
之所以有效,是因为 primary
是 angular2 的保留默认出口。
考虑以下路线:/inbox/123131$asd(compose:reply)
在上面的路线中,我们正在查看电子邮件并撰写回复。所以 - 当我们发送这个时,我们可能希望用户被发送回主视图 - 收件箱。那么您的 routerLink 需要如下所示:
<a [routerLink]="['',{outlets: {compose: null, primary: '/inbox'}}]" >Close</a>
请注意,这可能会在 Angular2 路由器的第三次重写中发生变化。