angular - 刷新页面时 CanDeactivateGuard 不起作用

Question

我正在使用 Angular 5 ad 已经为组件实现了 CanDeactivateGuard，以便在有一些未保存的更改时弹出模式:

export interface CanComponentDeactivate {
  canDeactivate: (nextStateUrl: string) => Observable<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {

  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return component && component.canDeactivate
      ? component.canDeactivate(nextState.url)
      : true;
  }
}

我已将此守卫添加到第 2 页，如果我从第 1 页导航到第 2 页并进行一些更改并尝试导航离开，它会完美运行。但是，如果我停留在 page2 并刷新页面然后进行一些更改，然后尝试导航离开，将调用 guard 中的 canDeactivate 方法，但组件值为 null，因此它返回 true 而不显示确认模式。或者，如果我从 page2 导航到另一个尚未加载的页面。请注意，所有页面都是延迟加载的，并且每个页面都有其路由模块。

我已经按照与此处相同的方式将守卫添加到 page2 模块: http://plnkr.co/edit/z2OqgTXTiPpTgXcmNiDM?p=preview

我也试过把守卫加为主守卫，也没用。

请问是什么原因导致我刷新时组件为null，但从其他页面导航到第2页时，组件不在守卫中。

这里有任何修复吗？

谢谢

Answer 1

有几个选项。我只能让我的应用程序在使用 router-outlet 进行页面刷新时警告未决更改。参见 https://stackoverflow.com/a/51145053/2525272 .

根据您的环境，您可以使用类似这样的东西扩展 CanDeactivate 守卫 - https://medium.com/front-end-weekly/angular-how-keep-user-from-lost-his-data-by-accidentally-leaving-the-page-before-submit-4eeb74420f0d .或者这个 - https://code.i-harness.com/en/q/2242097 .此处也讨论了这一点以及我使用的内容 - Warn user of unsaved changes before leaving page .关键是将 HostListener 导入到 Angular 中以处理/拦截浏览器的 beforeunload 事件，以便它可以通过我们的路由守卫以确保您需要在页面脏时提示用户。简单地添加以下内容将始终提示用户是否有更改，因此具有误导性/混淆性。如果用户关闭标签页或浏览器，它也会始终提示用户，无论是否由于未保存的更改而需要提示。

// prevent losing changes with page refresh
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

或者，像这样引入一个新的 CanActivate 守卫 - https://www.bennadel.com/blog/3368-prevent-routing-to-secondary-view-if-page-refresh-in-angular-5-0-0.htm .

另外，我真的很喜欢这个页面 - https://www.concretepage.com/angular-2/angular-candeactivate-guard-example以获得有关创建可重用路由保护服务的良好引用。