Angular 2 : routing without changing URL

Question

How can i route in an Angular 2 app without changing the URL? (this is because the app is located under one of several tabs on a page of a Django app, where it's suitable to leave the URL unchanged.)

currently i have something like this inside app.component.ts

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

and inside say HomeComponent, navigation to a user page uses the following

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

then the url will look like http://localhost:8000/django_url/user/123

is it possible to have the url unchanged when i navigate within the Angular 2 app? so the url will stay http://localhost:8000/django_url when a user is on page user/123 ?

Thanks!

Hi, I am facing the same problem. Did you found a solution for your problem? I am using Angular2 RC4 — Kosmonaft
– Kosmonaft, Commented Aug 5, 2016 at 0:26
Is this a best practice, an anti-pattern, or something in between? What do the angular devs have to say on this? — chrisinmtown
– chrisinmtown, Commented Aug 13, 2019 at 13:29

Günter Zöchbauer · Accepted Answer · 2016-12-05 20:16:38Z

103

Update

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

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

Update

There is a PR to support this directly https://github.com/angular/angular/pull/9608

Related issues

Original

You can implement a custom PlatformLocation similar to BrowserPlatformLocation but instead of calling ot history.pushState(), history.replaceState(), history.back(), and history.forward() maintain the changes in a local array.

You can then make Angular use your custom implementation by providing it like

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

edited Dec 5, 2016 at 20:16

answered May 5, 2016 at 16:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

totoro Over a year ago

currently i don't call history.pushState(), history.replaceState() or others. can you point me to some resource regarding pushState and PlatformLocation? thanks!

Günter Zöchbauer Over a year ago

You don't but the router does through PlatformLocation. This is what updates the URL. If you provide a custom implementation for PlatformLocation you can prevent this. I haven't thought a lot about this yet. Maybe you can just provide an implementation that does nothing and there is no need to maintain any state. Most of this is just to make the back/forward buttons work. If you don't reflect the navigation in the URL this might not make sense anyway.

totoro Over a year ago

could you give an example (or point me to some resources) of how to implement this custom PlatformLocation and where to place it? thanks again!

Günter Zöchbauer Over a year ago

Sorry, I forgot to add the URL. I updated my answer. When you have your custom implementation you provide it by bootstrap(AppComponent, [provide(PlatformLocation, {useClass: MyPlatformLocation})])

shan kulkarni · Accepted Answer · 2016-09-20 10:23:53Z

21

Finally its working in Angular2 final release. You need to pass { skipLocationChange: true } while navigating to the path i.e.

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

answered Sep 20, 2016 at 10:23

shan kulkarni

8558 silver badges19 bronze badges

3 Comments

Aniruddha Das Over a year ago

How to do the { skipLocationChange: true } from anchor tag?

Adam Hughes Over a year ago

Is there anyway to do this globally so every single call to navigate doesn't need these parameters passed in?

Helen Over a year ago

works for me! I'm using this for a not found page and rather than using 'history.go(-2);' I prefer not changing the wrong url. Thanks!

Vicky · Accepted Answer · 2018-01-18 08:29:44Z

this.router.navigateByUrl('path', { skipLocationChange: true }); also worked for me.

In Routes array I also added my path to load a component as below:

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

And in the file from there i need to replace the component, initialize router object like below and call at required place

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

Collectives™ on Stack Overflow

Angular 2 : routing without changing URL

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related