1

我有一个待定的变更守卫，例如

    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 将这些路由更改视为停用，因为该组件仍在页面上的不同选项卡中。

理想情况下，我可以将一些参数传递给警卫，告诉它在重新导航到当前路线的情况下要忽略哪些路由参数，然后通过某种方式在警卫内检测是否唯一的变化是被忽略的参数之一. 我不确定如何检测这样的参数变化和想法？

4

1 回答 1

1

您可以使用查询参数而不是路由参数。查询参数不会导致守卫重新运行。这不是查询参数和路由参数（或矩阵参数，或其他名称）之间的唯一区别，但这让它们值得考虑。角度路由器非常固执己见，因此您可能永远找不到优雅的解决方案。

查询参数：

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

或者

<a [routerLink]="[]" [queryParams]="{'tab': whatever}">tab</a>
于 2017-05-09T20:24:08.360 回答