Angular 2 Router: Add RouteParam without re-creating the component

Question

I have the following template:

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

When for instance adding an account, I do this._router.navigate(['/Dashboard', {sidebar: 'account'}]). However, the whole Dashboard Component get rebuild. I am looking for a way to set the query parameter without reloading the parent component. I tried using location.go as suggested here. It does update the url, but not the RouteParams. I am looking for a way to set a route param without reloading the component. Any ideas if this is (already) possible?

It is suggested here to use child-routes. However, since the sidebar is not always shown and I am unsure how to handle the inputs (accountId, transactionId) without having to rewrite the component to routeparams, I wonder if there is an easier way to update the RouteParams.

Thanks, Robin

Solution

As @günter-zöchbauer suggested, the solution is to use CanReuse and OnReuse:

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

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

score 1 · Accepted Answer · answered Mar 30 '16 at 06:36

Implement CanReuse and return true

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

See also this discussion about when CanReuse works an when not https://github.com/angular/angular/issues/7784

Angular 2 Router: Add RouteParam without re-creating the component

1 Answers1