Angular 2:路由而不更改URL [英] Angular 2 : routing without changing URL

问题描述

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

How can i route in an Angular 2 app without changing the URL? (this is because the app is located under one of several tabs on a page of a Django app, where it's suitable to leave the URL unchanged.)

目前，我在app.component.ts

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

并说出HomeComponent，导航到用户页面使用以下

and inside say HomeComponent, navigation to a user page uses the following

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

然后该网址将类似于http://localhost:8000/django_url/user/123

当我在Angular 2应用程序中导航时，URL是否可能保持不变?因此，当用户位于页面user/123上时，该网址将保持为http://localhost:8000/django_url?

is it possible to have the url unchanged when i navigate within the Angular 2 app? so the url will stay http://localhost:8000/django_url when a user is on page user/123 ?

谢谢！

推荐答案

更新

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

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

更新

有一个PR可以直接支持 https://github.com/angular/angular/拉/9608

There is a PR to support this directly https://github.com/angular/angular/pull/9608

相关问题

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

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

原始

您可以实现类似于PlatformLocation ="noreferrer"> BrowserPlatformLocation ，而不是调用ot history.pushState()，history.replaceState()，history.back()和history.forward()来维护本地数组中的更改.

You can implement a custom PlatformLocation similar to BrowserPlatformLocation but instead of calling ot history.pushState(), history.replaceState(), history.back(), and history.forward() maintain the changes in a local array.

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

You can then make Angular use your custom implementation by providing it like

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

这篇关于Angular 2:路由而不更改URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！