Question

我有以下模板：

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

例如，在添加帐户时，我会this._router.navigate(['/Dashboard', {sidebar: 'account'}])。但是，整个仪表板组件将重建。我正在寻找一种方法来设置查询参数，而无需重新加载父组件。我尝试使用location.go建议here。它会更新网址，但不会更新RouteParams。我正在寻找一种方法来设置路由参数，而无需重新加载组件。任何想法，如果这已经（已经）可能吗？

建议here使用子路由。但是，由于侧边栏并不总是显示，我不确定如何处理输入（accountId，transactionId）而不必将组件重写为routeparams，我想知道是否有更简单的方法来更新RouteParams。

谢谢，罗宾

解决方案

根据@günter-zöchbauer建议，解决方案是使用CanReuse和OnReuse：

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

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

Answer 1

实施CanReuse并返回true

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

另请参阅此讨论，了解CanReuse何时起作用https://github.com/angular/angular/issues/7784

Angular 2路由器：添加RouteParam而不重新创建组件

1 个答案: