Angular 4-更新路由，而不将其他出口的路由附加到URL [英] Angular 4 - update route without appending another outlet's route to URL

问题描述

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

I have a situation in Angular 4.0.3 where I have two <router-outlet>'s on a page.

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

第一个出口将接受内容路线，第二个将接受导航路线.我用这个实现导航；

The first outlet will accept routes for content, and the second will accept routes for navigation. I achieve the navigation using this;

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

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

This changes the outlet's contents without updating the URL - since I don't want any url that look like .. (nav:user).

问题是剩余的电源插座.我确实希望在单击这些链接时更新URL，例如...

The problem is the remaining outlet. I do want the URL to update when those are clicked, for instance ...

.../user/profile

从功能上讲，我可以使两个出口都具有适当的内容，但是它会一直将 nav 出口的路径附加到url上，就像这样...

Functionally, I can get both outlets to have the proper content, but it keeps appending the nav outlet's route to the url, like this ...

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

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

Is there any way I can stop it from adding the (nav:user) part?

推荐答案

除非有一些我不知道的窍门...我认为您不能.地址栏是维护路由状态的地方.因此，如果地址栏中没有辅助插座信息，则路由器将不知道如何在辅助插座中保留正确的路由组件.

Unless there is some trick I'm not aware of ... I don't think you can. The address bar is what maintains the route state. So without the secondary outlet information in the address bar, the router won't know how to keep the correct routed component in the secondary outlet.

您可以尝试覆盖 navigateByUrl 方法，如下所示: http://plnkr.co/edit/78Hp5OcEzN1jj2N20XHT?p = preview

You could try overriding the navigateByUrl method as shown here: 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 });
    }   } }

您可能会在此处添加逻辑，然后检查需要执行哪些路由.

You could potentially add logic here then to check which routes you need to do this on.

这篇关于Angular 4-更新路由，而不将其他出口的路由附加到URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！