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

Question

Как я могу маршрутизировать в приложении Angular 2 без изменения URL? (это потому, что приложение расположено на одной из нескольких вкладок на странице приложения 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

Можно ли изменить URL-адрес без изменений при навигации по приложению 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

Связанные вопросы

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

оригинал

Вы можете реализовать пользовательские PlatformLocation похож на BrowserPlatformLocation, но вместо вызова ot 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 );
    }