Angular 2: instradamento senza modifica dell’URL

Come posso instradare in un’app Angular 2 senza modificare l’URL? (questo perché l’app si trova in una delle diverse tabs di una pagina di un’app di Django, dove è opportuno lasciare l’URL invariato).

attualmente ho qualcosa di simile all’interno di app.component.ts

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

e all’interno di HomeComponent , la navigazione in una pagina utente utilizza quanto segue

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

quindi l’URL sarà simile a http://localhost:8000/django_url/user/123

è ansible avere l’URL invariato quando navigo all’interno dell’app Angular 2? quindi l’URL rimarrà http://localhost:8000/django_url quando un utente è sulla pagina user/123 ?

Grazie!

Aggiornare

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

Aggiornare

C’è un PR per supportare direttamente questo https://github.com/angular/angular/pull/9608

Problemi correlati

Originale

È ansible implementare una PlatformLocation personalizzata simile a BrowserPlatformLocation ma invece di chiamare history.pushState() , history.replaceState() , history.back() e history.forward() mantengono le modifiche in un array locale.

Puoi quindi rendere Angular utilizza la tua implementazione personalizzata fornendola come

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

Finalmente lavora con Angular2. Devi passare {skipLocationChange: true} mentre navighi sul percorso, ad es

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

this.router.navigateByUrl('path', { skipLocationChange: true }); ha funzionato anche per me.

Nella matrice Routes ho anche aggiunto il mio percorso per caricare un componente come di seguito:

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

E nel file da lì ho bisogno di sostituire il componente, inizializzare l’object router come di seguito e chiamare al posto richiesto

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