20

I am trying to navigate to a specific url using location.go service from typescript function. It changes the url in the browser but the component of the url is not reflected in the screen. It stays on the login (actual) screen - say for eg:

constructor(location: Location, public _userdetails: userdetails){
    this.location = location;
}
login(){
    if (this.username && this.password){
        this._userdetails.username = this.username;
        this.location.go('/home');
    }
    else{
        console.log('Cannot be blank');
    }
}

Is there a compile method or a refresh method I am missing?

Gary
  • 2,293
  • 2
  • 25
  • 47

1 Answers1

24

Yes, for redirecting from one route to another you should not be using location.go, it generally used to get normalized url on browser.

Location docs has strictly mentioned below note.

Note: it's better to use Router service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing.

Rather you should use Router API's navigate method, which will take ['routeName'] as you do it while creating href using [routerLink] directive.

If you wanted redirect via URL only then you could use navigateByUrl which takes URL as string like router.navigateByUrl(url)

import { 
  ROUTER_DIRECTIVES, 
  RouteConfig, 
  ROUTER_PROVIDERS, 
  Location, //note: in newer angular2 versions Location has been moved from router to common package
  Router 
} from 'angular2/router';

constructor(location: Location, 
            public _userdetails: userdetails,
            public _router: Router){
    this.location = location;
}
login(){
    if (this.username && this.password){
        this._userdetails.username = this.username;
        //I assumed your `/home` route name is `Home`
        this._router.navigate(['Home']); //this will navigate to Home state.
        //below way is to navigate by URL
        //this.router.navigateByUrl('/home')
    }
    else{
        console.log('Cannot be blank');
    }
}

Update

In further study, I found that, when you call navigate, basically it does accept routeName inside array, and if parameters are there then should get pass with it like ['routeName', {id: 1, name: 'Test'}].

Below is API of navigate function of Router.

Router.prototype.navigate = function(linkParams) {
  var instruction = this.generate(linkParams); //get instruction by look up RouteRegistry
  return this.navigateByInstruction(instruction, false);
};

When linkParams passed to generate function, it does return out all the Instruction's required to navigate on other compoent. Here Instruction means ComponentInstruction's which have all information about Routing, basically what ever we register inside @RouteConfig, will get added to RouteRegistry(like on what path which Component should assign to to router-outlet).

Now retrieved Instruction's gets passed to navigateByInstruction method, which is responsible to load Component and will make various thing available to component like urlParams & parent & child component instruction, if they are there.

Instruction (in console)

auxInstruction: Object //<- parent instructions
child: null //<- child instructions
component: ComponentInstruction //<-current component object
specificity: 10000
urlParams: Array[0] <-- parameter passed for the route
urlPath: "about" //<-- current url path

Note: Whole answer is based on older router version, when Angular 2 was in beta release.

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • 1
    Why would it not go through `location.go('url');` ? I was able to get router.navigate work. How do I enable through that? Do I have to listen for events and instantiate the component... I am unclear on this. Can you help? – Gary Feb 21 '16 at 08:55
  • @Gary I'll try to gather detail, why `location.go` not loading `route component`.. but why you relying on `url` bases route change(and Angular2 doc has also made not of not to use `Location` api to change route)? – Pankaj Parkar Feb 21 '16 at 09:59
  • I think using location.go at this point is incorrect use of it. I think they should have implement route change on location.go.. Hope still api is in beta release..hopefully angular2 will take care of this case. – Pankaj Parkar Feb 21 '16 at 13:39
  • 1
    @Gary look at updated answer.. I digged a little deeper in code and updated my understanding.. feel free to tell me if there is anyting wrong. – Pankaj Parkar Feb 21 '16 at 21:48
  • That is good explanation. specificity: 10000 is what? What purpose does it solve? And so if I call location.go, I might need to look at implementation of navigateByInstruction with a promise on route change. Is that correct or I got navigateByInstruction usage wrong? – Gary Feb 22 '16 at 01:44
  • 1
    @Gary yes. some how you need to put `listner/observable` over window location change event, and from that you could call `router.navigateByUrl('/home')` method.. then it will do desire functionality.. – Pankaj Parkar Feb 22 '16 at 06:57
  • Thanks. Let me try this, though not sure if that will work. `Use Location only if you need to interact with or create normalized URLs outside of routing.` – Gary Feb 22 '16 at 07:59
  • I'll just add this here: import { Location } from 'angular2/platform/common'; – Kesarion May 15 '16 at 15:58