Angular 4 - 更新路线，但不追加另一个店铺的路线到URL

我有一个Angular 4.0.3的情况，我在页面上有两个<router-outlet>'s。Angular 4 - 更新路线，但不追加另一个店铺的路线到URL

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

第一个插座将接受内容路线，第二个插座将接受路线导航。我用这个来实现导航;

router.navigate(['', {outlets: { nav: [route] } }],{skipLocationChange: true });

这改变了出口的内容，而无需更新URL - 因为我不想看起来像任何url .. (nav:user)做。

问题是剩余的插座。我想要的网址更新这些被点击时，例如...

.../user/profile

功能，我可以得到两个出口有适当的内容，但它一直追加nav出口的路线网址，例如这...

.../user/profile(nav:user)

有什么办法可以阻止它加入(nav:user)部分？

来源

2017-04-26 Ciel

除非有一些技巧我不知道...我不认为你可以。地址栏是维护路由状态的东西。因此，没有地址栏中的辅助插座信息，路由器将不知道如何将正确的路由组件保留在辅助插座中。

你可以尝试重写navigateByUrl方法，如下所示：http://plnkr.co/edit/78Hp5OcEzN1jj2N20XHT?p=preview

export class AppModule { constructor(router: Router) { 
    const navigateByUrl = router.navigateByUrl; 

    router.navigateByUrl = function(url: string|UrlTree, extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean> { 
     return navigateByUrl.call(router, url, { ...extras, skipLocationChange: true }); 
    } } }

你可能在这里添加逻辑那就要检查一下你需要这样做上的路由。

来源

2017-04-26 20:39:24 DeborahK

我可以防止所需插座的状态发生变化吗？也许这会达到效果？ – Ciel

不改变状态，你将如何路线？也许我不明白你的问题或你想达到的目标。你可以做一名运动员吗？ – DeborahK

只有当用户明确点击导航链接时，指定的插座才会更改。它不应该绑定到url - 我使用skipLocationChange来保持url跳转时不变。 – Ciel

Angular 4 - 更新路线，但不追加另一个店铺的路线到URL

回答

相关问题