Update url when switching between items in Master / Details pattern in Angular2

Question

I'm implementing Master / Detail pattern as described in Angular2 tutorial: https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

Simplified example:

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`
    <ul>
      <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
        {{hero.name}}
      </li>
    </ul>

    <div *ngIf="selectedHero">
      <h2>{{selectedHero.name}} details!</h2>
    </div>
  `,
})

export class AppComponent {
  heroes = HEROES;
  selectedHero: Hero;
  onSelect(hero: Hero) { this.selectedHero = hero; }
}

Whenever an item in a list is clicked its details are shown on the screen. However, I can't find a way to update url in the location bar to reflect the fact that one of the items is selected.

The only way seem to be to navigate to another view using router but it refreshes the whole master-detail component including the list of items.

My goal is only to refresh part of the page while keeping the url in sync with the shown content.

Günter Zöchbauer · Accepted Answer · 2016-06-11 10:14:08Z

1

Not sure what you mean by "refreshes the whole page". That's exactly what the router does not.

If you use @angular/router-deprecated then you can implement CanReuse by adding

routerCanReuse(/*nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction*/) {
  return true;
}

This way the router doesn't drop and recreate the component when you navigate to the same route where only parameter values changed.

I don't think @angular/router supports this and @angular/router is going to be replaced again soon anyway.

answered Jun 11, 2016 at 10:14

Günter Zöchbauer

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

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

3 Comments

Alexei Tenitski Over a year ago

I've updated the question - it refreshes whole master-detail component whenever router.navigate is called. I'm trying to avoid refresh of the list and only refresh item details.

Günter Zöchbauer Over a year ago

If you change the route, then components are removed and others added. If the route doesn't change the component then routerCanReuse can avoid that components are dropped/recreated. Otherwise this is not supported. You can move the state of the component to a service to keep it when the component was destroyed and recreated.

Alexei Tenitski Over a year ago

Thank you, routerCanReuse was exactly what was required

Collectives™ on Stack Overflow

Update url when switching between items in Master / Details pattern in Angular2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related