Angular 角度2：不更改URL的路由

如何在不更改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}]);

然后url看起来像

http://localhost:8000/django_url/user/123

当我在Angular 2应用程序中导航时，是否可以保持url不变？因此url将保持

http://localhost:8000/django_url

当用户在页面

user/123

上时

---

谢谢

更新

router.navigateByUrl（“/team/33/user/11”，{skipLocationChange:true}）；

相关问题





原创

您可以实现一个自定义的
PlatformLocation
，类似于但不调用ot
history.pushState（）
、
history.replaceState（）
、
history.back（）
和
history.forward（）
来维护本地数组中的更改

然后，您可以通过如下方式使用自定义实现

bootstrap（AppComponent，
[提供（PlatformLocation，{useClass:MyPlatformLocation}）]；
最后，它将在Angular2最终版本中工作。在导航到路径时，需要传递{skipLocationChange:true}，即

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

this.router.navigateByUrl（'path'，{skipLocationChange:true}）
也为我工作

在
Routes
数组中，我还添加了加载组件的路径，如下所示：

const appRoutes: Routes = [    
   { path: 'Account/MySchool', component: MySchoolComponent }
];

在那里的文件中，我需要替换组件，初始化下面的
路由器
对象，并在所需位置调用

import { Router } from '@angular/router';

constructor(private router: Router) {    }


onSubmit() {        
    this._requestService.postPageOneData("Account/SavePageOneData", this.userProfile)
        .subscribe((response) => {
            if(response.status == 'success'){
                   this.router.navigateByUrl('Account/PageTwoSelection', { skipLocationChange: true });
              }
        }, this.handleErrorSubscribed );
    }

目前我没有调用
history.pushState（）
，
history.replaceState（）
或其他。你能给我指一些关于
pushState
和
PlatformLocation
的资源吗？谢谢您不需要，但路由器通过
平台位置
。这就是更新URL的内容。如果为
PlatformLocation
提供自定义实现，则可以防止这种情况。我还没想太多。也许您可以提供一个不做任何事情的实现，并且不需要维护任何状态。大多数这只是为了使后退/前进按钮工作。如果您没有在URL中反映导航，这可能没有任何意义。您能举个例子（或给我指一些参考资料）说明如何实现此自定义
平台位置以及将其放置在何处吗？再次感谢！对不起，我忘了添加URL。我更新了我的答案。当您拥有自定义实现时，您可以通过
bootstrap（AppComponent，[provide（PlatformLocation，{useClass:MyPlatformLocation}）]）提供它。
Hi，我面临同样的问题。你找到解决问题的办法了吗？我使用的是Angular2 RC4这是最佳实践、反模式还是介于两者之间？angular开发者对此有何看法？如何从anchor标记中执行{skipLocationChange:true}？是否有全局执行此操作的方法，以便对
navigate
的每次调用都不需要传入这些参数？对我来说很有用！我将此用于未找到的页面，而不是使用“history.go（-2）；”我宁愿不要更改错误的url。谢谢