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

相关问题

<强>原始

您可以实施与BrowserPlatformLocation类似的自定义PlatformLocation，但不要调用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 });

Answer 3

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

Angular 2：路由而不更改URL

3 个答案: