Question

我有像

这样的待定换岗人员

    import {CanDeactivate} from '@angular/router';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
  }
}

我的问题是我还有一些与页面路径参数绑定的选项卡控件，因此当导航选项卡时，它会更新路径参数，反之亦然。它通过使用新参数导航到当前路径来更新参数，该参数不会重新加载组件，因为它仍然是当前路径。我的问题是，我不希望这些路由更改被PendingChangesGuard视为停用，因为该组件仍位于不同选项卡中的页面上。

理想情况下，我可以将一些参数传递给警卫，告诉它在重新导航到当前路线的情况下要忽略哪条路线，然后在警卫内部检测是否只有一个变化是被忽略的参数。我不确定如何检测这样的参数和想法的变化？

Answer 1

您可以使用查询参数而不是路径参数。查询参数不会导致警卫重新运行。这不是查询参数和路径参数（或矩阵参数，或者它们所谓的任何参数）之间的唯一区别，但它使它们值得考虑。角度路由器非常自以为是，所以你可能永远找不到一个优雅的解决方案。

查询参数：

this.router.navigate([], {
  queryParams: {'tab': whatever}
});

或

<a [routerLink]="[]" [queryParams]="{'tab': whatever}">tab</a>

Angular2等待更改后卫，在重新导航到当前路线时需要忽略特定路线参数

1 个答案: