Angular 2：路由而不更改 URL答案

【问题标题】：Angular 2 : routing without changing URLAngular 2：路由而不更改 URL
【发布时间】：2016-08-31 11:38:56
【问题描述】：

如何在不更改 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 不变？所以当用户在页面user/123 上时，url 将保持http://localhost:8000/django_url ？

谢谢！

【问题讨论】：

嗨，我也面临同样的问题。您找到解决问题的方法了吗？我正在使用 Angular2 RC4
这是最佳实践、反模式还是介于两者之间？角度开发人员对此有何看法？

标签： angular

【解决方案1】：

this.router.navigateByUrl('path', { skipLocationChange: true }); 也为我工作。

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

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

在文件中我需要替换组件，像下面一样初始化router对象并在需要的地方调用

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 );
    }

【讨论】：

【解决方案2】：

更新

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

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

更新

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

相关问题

原创

您可以实现与BrowserPlatformLocation 类似的自定义PlatformLocation，但无需调用history.pushState()、history.replaceState()、history.back() 和history.forward() 来维护本地数组中的更改。

然后，您可以通过提供类似的方式让 Angular 使用您的自定义实现

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

【讨论】：

目前我不打电话给history.pushState()、history.replaceState()或其他人。你能给我指出一些关于pushState 和PlatformLocation 的资源吗？谢谢！
您没有，但路由器通过PlatformLocation 完成。这是更新 URL 的内容。如果您为PlatformLocation 提供自定义实现，您可以防止这种情况发生。我还没有想太多。也许您可以只提供一个什么都不做并且不需要维护任何状态的实现。其中大部分只是为了使后退/前进按钮起作用。如果您不在 URL 中反映导航，这可能没有任何意义。
您能否举个例子（或指出一些资源）来说明如何实现此自定义 PlatformLocation 以及将其放置在何处？再次感谢！
抱歉，我忘记添加网址了。我更新了我的答案。当您拥有自定义实现时，您可以通过 bootstrap(AppComponent, [provide(PlatformLocation, {useClass: MyPlatformLocation})]) 提供它

【解决方案3】：

终于在 Angular2 最终版本中工作了。您需要在导航到路径时传递 { skipLocationChange: true }，即

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

【讨论】：

锚标签中的 { skipLocationChange: true } 怎么办？
是否可以在全局范围内执行此操作，以便每次调用 navigate 都不需要传入这些参数？
为我工作！我将其用于未找到的页面，而不是使用'history.go(-2);'我宁愿不更改错误的网址。谢谢！