Angular 2:路由而不更改URL

Question

如何在不更改URL的情况下在Angular 2应用程序中进行路由？(这是因为应用程序位于Django应用程序页面上的几个选项卡之一下,适合保持URL不变.)

目前我在里面有这样的东西 app.component.ts

@RouteConfig([
  {
    path: '/home',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true
  },
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: UserDetailComponent
  }
])

在内部说HomeComponent,导航到用户页面使用以下内容

this._router.navigate(['UserDetail', {id: id}]);

然后网址看起来像 http://localhost:8000/django_url/user/123

当我在Angular 2应用程序中导航时,是否可以保持URL不变？所以http://localhost:8000/django_url当用户在页面上时,网址会保留user/123吗？

谢谢!

Answer 1

更新

router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

<a [routerLink]="..." skipLocationChange>click me</a>

更新

有一个PR直接支持这个https://github.com/angular/angular/pull/9608

相关问题

• https://github.com/angular/angular/issues/9579
• https://github.com/angular/angular/issues/9949

原版的

您可以实现PlatformLocation类似于BrowserPlatformLocation的自定义,而不是调用ot history.pushState(),history.replaceState()和history.back(),并history.forward()在本地数组中维护更改.

然后,您可以通过提供它来使Angular使用您的自定义实现

bootstrap(AppComponent, 
    [provide(PlatformLocation, {useClass: MyPlatformLocation})]);

Answer 2

最后它在Angular2最终版本中工作.您需要在导航到路径时传递{skipLocationChange:true},即

 this.router.navigateByUrl('path', { skipLocationChange: true });