Angular 2 Router, href links and unwanted page refresh

Question

i am currently experimenting with angular2 (beta1) and i'm a bit puzzled about the new router.

Navigating via router.navigate works like a charm, while trying to do that via a normal link to a registered route refreshes the page. This happens with PathLocationStrategy of course, as HashLocationStrategy works as expected.

Is this a bug or the normal behaviour?

TIA

Answer 1

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

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

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

Answer 2

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

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

If you have array of link you can still try something like this with *ngFor