【问题标题】:Auxiliary routes in Angular 2 remains in the url after navigating awayAngular 2 中的辅助路由在导航离开后仍保留在 url 中
【发布时间】:2016-03-31 06:04:26
【问题描述】:

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

问题是在导航离开后辅助路由仍然存在(在 URL 和内容中)。

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. 从主页,我点击链接“Leads list”。
  2. 我被重定向到路由“/leadslist(sidebar)”,并且侧边栏内容已正确加载到其路由器插座中。到目前为止一切顺利。
  3. 如果我现在单击“主页”链接将我带回“/”,则 URL 将改为“/(侧边栏)”,这会将我带回主页但侧边栏已加载(不需要的行为!)

我的问题:如何导航到没有辅助路线“沿途”的路线?

【问题讨论】:

标签: angular angular2-routing


【解决方案1】:

目前(恕我直言)这可以在 Angular2 路由器中更好地处理,但您需要做的是将您的 aux 出口设置为 null 并指向 primary带有您要返回的网址的插座

这是因为primary 是 angular2 的保留默认出口。

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

在上述路线中,我们正在查看一封电子邮件并撰写回复。所以 - 当我们发送这个时,我们可能希望用户被发送回主视图 - 收件箱。那么你的 routerLink 需要如下所示:

&lt;a [routerLink]="['',{outlets: {compose: null, primary: '/inbox'}}]" &gt;Close&lt;/a&gt;

请注意,这可能会在 Angular2 路由器的第三次重写中发生变化。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-05
    • 1970-01-01
    • 1970-01-01
    • 2019-02-19
    • 2017-05-03
    相关资源
    最近更新 更多