Change URL with Angular 2 RC6 Router

Question

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

Check out my answer at the bottom: stackoverflow.com/questions/35618463/… — Luke Dupin
– Luke Dupin, Commented Sep 6, 2016 at 2:34

Günter Zöchbauer · Accepted Answer · 2016-09-06 04:56:04Z

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.

answered Sep 6, 2016 at 4:56

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

Alexander Ciesielski Over a year ago

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. stackoverflow.com/questions/35618463/…

Collectives™ on Stack Overflow

Change URL with Angular 2 RC6 Router

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related