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?

1
  • 1
    try using router.navigate(['your route']) Commented Feb 21, 2016 at 9:19

1 Answer 1

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.

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

8 Comments

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 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)?
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.
@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.
@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..
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.