url aktualisieren, wenn zwischen den einzelnen Posten in Master/Details der Muster in Angular2

Question

Ich bin Umsetzung Master/Detail-Musterschalt wie in Angular2 Tutorial beschrieben: https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

Vereinfachtes Beispiel:

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; } 
} 

Jedes Mal, wenn ein Element in Eine Liste wird angeklickt und die Details werden auf dem Bildschirm angezeigt. Ich kann jedoch keine Möglichkeit finden, URL in der Adressleiste zu aktualisieren, um die Tatsache widerzuspiegeln, dass eines der Elemente ausgewählt ist.

Die einzige Möglichkeit scheint die Navigation zu einer anderen Ansicht mit dem Router zu sein, aber es aktualisiert die gesamte Master-Detail-Komponente einschließlich der Liste der Elemente.

Mein Ziel ist nur einen Teil der Seite zu aktualisieren, während die URL synchron mit dem angezeigten Inhalt bleibt.

Answer 1

Nicht sicher, was Sie unter "aktualisiert die ganze Seite" verstehen. Genau das tut der Router nicht.

Wenn Sie @angular/router-deprecated verwenden, dann können Sie CanReuse implementieren durch Zugabe

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

diese Weise kann der Router nicht und die Komponente abfällt neu erstellen, wenn Sie auf der gleichen Route navigieren, in dem nur die Parameterwerte geändert.

Ich glaube nicht @angular/router unterstützt dies und @angular/router wird sich wieder ohnehin bald ersetzt werden.