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)
部分?
答
除非有一些技巧我不知道...我不认为你可以。地址栏是维护路由状态的东西。因此,没有地址栏中的辅助插座信息,路由器将不知道如何将正确的路由组件保留在辅助插座中。
你可以尝试重写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 });
} } }
你可能在这里添加逻辑那就要检查一下你需要这样做上的路由。
我可以防止所需插座的状态发生变化吗?也许这会达到效果? – Ciel
不改变状态,你将如何路线?也许我不明白你的问题或你想达到的目标。你可以做一名运动员吗? – DeborahK
只有当用户明确点击导航链接时,指定的插座才会更改。它不应该绑定到url - 我使用skipLocationChange来保持url跳转时不变。 – Ciel