Question

我在Angular 4.0.3有一种情况，我在页面上有两个<router-outlet>。

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

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

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

这会更改插座的内容而不更新网址 - 因为我不希望任何url看起来像.. (nav:user)。

问题是剩下的出路。我希望在点击这些URL时更新URL，例如......

.../user/profile

从功能上讲，我可以让两个出口都有适当的内容，但它会继续将nav出口的路线附加到网址上，就像这样......

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

有什么方法可以阻止它添加(nav:user)部分吗？

Answer 1

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

您可以尝试覆盖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 });
    }   } }

您可以在此处添加逻辑，然后检查您需要执行此操作的路线。

Angular 4 - 更新路线而不添加另一个出口到URL的路线

1 个答案: