Angular 2: routage sans changer d'URL

Question

Comment puis-je itinéraire dans Angulaire à 2 application sans modification de l'URL? (c'est parce que l'app est situé à moins de plusieurs onglets sur la page d'un Django app, où il convient de laisser l'URL inchangées).

actuellement, j'ai quelque chose comme ceci à l'intérieur d' app.component.ts

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

et à l'intérieur de dire HomeComponent, la navigation vers la page d'un utilisateur utilise les éléments suivants

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

ensuite l'url ressemblera http://localhost:8000/django_url/user/123

est-il possible d'avoir l'url inchangée lorsque je navigue dans l'angle de 2 app? donc l'url restera http://localhost:8000/django_url lorsqu'un utilisateur est sur la page d' user/123 ?

Merci!

Answer 1

Mise à jour

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

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

Mise à jour

Il ya un PR de soutenir directement https://github.com/angular/angular/pull/9608

Questions liées à la

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

D'origine

Vous pouvez mettre en œuvre une coutume PlatformLocation similaire à BrowserPlatformLocation mais au lieu d'appeler ot history.pushState(), history.replaceState(), history.back(), et history.forward() maintenir les changements dans un tableau.

Vous pouvez alors faire Angulaire utiliser votre personnalisé de mise en œuvre, en fournissant comme il

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

Answer 2

Enfin son travail dans la version finale Angular2. Vous devez passer {skipLocationChange: true} lors de la navigation vers le chemin, c'est-à-dire

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

Answer 3

this.router.navigateByUrl('path', { skipLocationChange: true }); travaillaient aussi pour moi.

Dans le tableau Routes , j'ai également ajouté mon chemin pour charger un composant comme ci-dessous:

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

Et dans le fichier à partir de là, je dois remplacer le composant, initialiser l'objet router comme ci-dessous et appeler à l'endroit voulu

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