Angular 2 Router, href links and unwanted page refresh

Question

I am currently experimenting with angular2 (beta1) and I am a bit puzzled by the new router.

Navigating through router.navigate works like a charm, trying to do this using the usual link to the registered route, it refreshes the page. This, of course, happens with PathLocationStrategy, as HashLocationStrategy works as expected.

Is this a mistake or normal behavior?

TIA

Answer 1

Instead, you should use routerLink . For example, <a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">

See also https://angular.io/guide/ajs-quick-reference#ng-href

You can add event listeners to the <a href=... or parent object and call router.navigate... and event.preventDefault() .

Answer 2

You can try passing json in the html template to routerLink like this.

 @Component({ selector: 'app', template: ` <a [routerLink]="routerData"> ` }) class AppComponent { this.routeData = [ '/MyCmp', {myParam: 'value' } ] } 

If you have an array of links, you can try something like this with * ngFor