导航后，Angular 2中的辅助路线仍保留在url中 [英] Auxiliary routes in Angular 2 remains in the url after navigating away

问题描述

我正在尝试使用辅助路线在边栏中显示不同的内容，具体取决于您所走的路线.

I'm trying to use auxiliary routes to show different content in a sidebar, depending on which route you're on.

问题在于，导航离开后，辅助路由仍然存在(URL和内容中都包含).

The problem is that the auxiliary route remains (both in URL and the content) after navigating away.

HTML:

<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

RouteConfig:

@RouteConfig([
    {path: '/', name: 'Home', component: Home, useAsDefault: true},
    {path: '/leadslist', name: 'LeadsList', component: LeadsList},
    {aux:'/sidebar', name: 'Sidebar', component: Sidebar}
])

导航栏中的链接:

<a [routerLink]="['Home']">Home</a>    
<a [routerLink]="['LeadsList', ['Sidebar']]">Leads list</a>

当前行为:

1. 在主页上，单击链接铅列表".
2. 我被重定向到路由"/leadslist(sidebar)"，并且侧边栏内容已正确加载到其路由器出口中.到目前为止一切都很好.
3. 如果我现在单击链接主页"将我带回到"/"，则该URL改为"/(sidebar)"，这会将我带回到主页，但加载了边栏(不需要的行为！)

我的问题:如何在没有辅助路线跟踪"的情况下导航至某条路线?

My question: How can I navigate to a route without the auxiliary route "tagging along"?

推荐答案

当前(imho)可以在Angular2路由器中更好地解决此问题，但是您需要将 aux出口设置为 ，然后将 primary插座指向要返回的网址.

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.

之所以有效，是因为primary是angular2的保留默认插座.

This works because primary is a reserved default outlet for angular2.

请考虑以下路线:/inbox/123131$asd(compose:reply)

在上述路线中，我们正在查看电子邮件并撰写回复.所以-当我们发送此邮件时，我们可能希望用户被发送回主视图-收件箱.然后您的routerLink将需要如下所示:

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>

请警惕，这可能会在Angular2路由器的第三次重写中更改.

Be wary that this might be subject to change in the third rewrite of the Angular2 router.

这篇关于导航后，Angular 2中的辅助路线仍保留在url中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！