Angular 2 Router: In RouteParam ohne erneute Erstellen der Komponente

Question

Ich habe die folgende Vorlage:

<aside class="fv-right-sidebar" *ngIf="_routeParams.get('sidebar')"> 
    <fv-account *ngIf="_routeParams.get('sidebar') === 'account'" [accountId]="_routeParams.get('accountId')" (canceled)="closeSidebar()" (saved)="closeSidebar()"></fv-account> 
    <fv-transaction *ngIf="_routeParams.get('sidebar') === 'transaction'" [transactionId]="_routeParams.get('id')" (canceled)="closeSidebar()" (saved)="closeSidebar()"></fv-transaction> 
</aside> 

Wenn zum Beispiel ein Konto hinzufügen, ich this._router.navigate(['/Dashboard', {sidebar: 'account'}]) tun. Die gesamte Dashboard-Komponente wird jedoch neu erstellt. Ich suche nach einer Möglichkeit, den Abfrageparameter festzulegen, ohne die übergeordnete Komponente neu zu laden. Ich habe versucht, location.go wie vorgeschlagen here zu verwenden. Es aktualisiert die URL, aber nicht die RouteParams. Ich bin auf der Suche nach einer Möglichkeit, einen Routenparameter festzulegen, ohne die Komponente neu zu laden. Irgendwelche Ideen, wenn das (schon) möglich ist?

Es wird empfohlen, here Child-Routen zu verwenden. Da die Sidebar nicht immer angezeigt wird und ich nicht sicher bin, wie die Eingaben (accountId, transactionId) gehandhabt werden sollen, ohne die Komponente in routeparams neu schreiben zu müssen, frage ich mich, ob es eine einfachere Möglichkeit gibt, die RouteParams zu aktualisieren.

Danke, Robin

Lösung

Als @günter-zöchbauer vorgeschlagen, die Lösung CanReuse und OnReuse zu verwenden ist:

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

    routerOnReuse(nextInstruction:ComponentInstruction, prevInstruction:ComponentInstruction):any { 
    this._routeParams = new RouteParams(nextInstruction.params); 
    } 

Answer 1

Implement CanReuse und zurück true

class MyCmp implements CanReuse { 
    routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; } 
} 

Siehe auch diese Diskussion darüber, wann CanReuse arbeitet eine, wenn nicht https://github.com/angular/angular/issues/7784