1

I am building a list app, where list-items can be selected. Only one item can be selected at a time. A detail-view for the list-item is displayed below the list.

Now I want to change the url based on which item is selected, without navigating to another page.

Is it possible? If yes, how?

Thanks

Alexander Ciesielski
  • 10,506
  • 5
  • 45
  • 66
  • 1
    Check out my answer at the bottom: http://stackoverflow.com/questions/35618463/change-route-params-without-reloading-in-angular-2/39322473#39322473 – Luke Dupin Sep 06 '16 at 02:34

1 Answers1

2

Use route parameters for this

{ path: '', redirectTo, 'items', pathMatch: 'full' },
{ path: 'items', component: ItemList, children: [
  { path: '', component: DummyItem },
  { path: ':id/detail', component: ItemDetails }
]}

<a [routerLink]="itemId + '/detail'">Item {{itemId}}</a>

class ItemDetail {
  constructor(route:ActivatedRoute) {
    route.params.subscribe(params => this.id = params['id']);
  }
}

With a router navigation, when only route params change, nothing is reloaded.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    I have used the solution provided in the following answer, since it was easier to implement with what I have. In case of refactoring my code, I will use the approach you provided. Thanks. http://stackoverflow.com/questions/35618463/change-route-params-without-reloading-in-angular-2/39322473#39322473 – Alexander Ciesielski Sep 07 '16 at 12:02