change - Angular 2: enrutamiento sin cambiar la URL

dynamic title angular 5

Question

¿Cómo puedo enrutar en una aplicación Angular 2 sin cambiar la URL? (Esto se debe a que la aplicación se encuentra debajo de una de varias pestañas en una página de una aplicación de Django, donde es adecuado dejar la URL sin cambios).

Actualmente tengo algo como esto dentro de app.component.ts

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

y dentro de decir HomeComponent , la navegación a una página de usuario usa lo siguiente

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

entonces la url se verá como http://localhost:8000/django_url/user/123

¿Es posible que la URL no cambie cuando navego dentro de la aplicación Angular 2? entonces la url permanecerá http://localhost:8000/django_url cuando un usuario esté en la página user/123 ?

¡Gracias!

Answer 1

Finalmente está trabajando en la versión final de Angular2. Debe pasar {skipLocationChange: true} mientras navega hacia la ruta, es decir

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

Answer 2

this.router.navigateByUrl(''path'', { skipLocationChange: true }); También funcionó para mí.

En la matriz de Routes también agregué mi ruta para cargar un componente de la siguiente manera:

const appRoutes: Routes = [    
   { path: ''Account/MySchool'', component: MySchoolComponent }
];

Y en el archivo a partir de ahí, necesito reemplazar el componente, inicializar el objeto del router como se muestra a continuación y llamar al lugar requerido

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

Answer 3

Actualizar

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

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

Actualizar

Hay un RP para apoyar esto directamente https://github.com/angular/angular/pull/9608

Asuntos relacionados

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

Original

Puede implementar una PlatformLocation personalizada similar a BrowserPlatformLocation pero en lugar de llamar a history.pushState() , history.replaceState() , history.back() e history.forward() mantienen los cambios en una matriz local.

Luego puede hacer que Angular use su implementación personalizada proporcionándola como

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