Angular 2: маршрутизация без изменения URL-адреса

Как я могу маршрутизировать приложение Angular 2 без изменения URL-адреса? (это связано с тем, что приложение расположено под одной из нескольких вкладок на странице приложения Django, где подходит для оставления URL без изменений.)

В настоящее время у меня есть что-то вроде этого внутри app.component.ts

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

и внутри say HomeComponent, для перехода на страницу пользователя используются следующие

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

тогда URL будет выглядеть как http://localhost:8000/django_url/user/123

Возможно ли, чтобы URL-адрес не изменился, когда я перемещаюсь внутри приложения Angular 2? поэтому URL останется http://localhost:8000/django_url, когда пользователь находится на странице user/123?

Спасибо!

Ответы

Ответ 1

Обновление

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

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

Обновление

Существует PR для поддержки этого непосредственно https://github.com/angular/angular/pull/9608

Связанные проблемы

Оригинал

Вы можете реализовать пользовательский PlatformLocation, похожий на BrowserPlatformLocation, но вместо вызова ot history.pushState(), history.replaceState(), history.back(), и history.forward() поддерживают изменения в локальном массиве.

Затем вы можете использовать Angular свою собственную реализацию, предоставив ее как

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

Ответ 2

Наконец, он работает в финальной версии Angular2. Вам необходимо передать {skipLocationChange: true} при навигации по пути i.e.

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

Ответ 3

this.router.navigateByUrl('путь', {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 );
    }