Угловая 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

Update

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

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

Update

Существует пиар, чтобы поддержать это непосредственно 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: истинно} во время навигации по пути т.е.

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