刷新页面时 CanDeactivateGuard 不起作用答案

【问题标题】：CanDeactivateGuard doesn't work when refresh the page刷新页面时 CanDeactivateGuard 不起作用
【发布时间】：2018-08-03 02:20:27
【问题描述】：

我正在使用 Angular 5 广告为组件实现了 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;
  }
}

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

我以与此处相同的方式将保护添加到 page2 模块： http://plnkr.co/edit/z2OqgTXTiPpTgXcmNiDM?p=preview

我也尝试将守卫添加到主守卫，但也没有用。

刷新组件时是否有任何原因为null，但是当我从其他页面导航到第2页时，该组件不在防护中。

这里有什么解决办法吗？

谢谢

【问题讨论】：

标签： angular angular5

【解决方案1】：

有几个选项。在使用路由器插座进行页面刷新时，我只能让我的应用程序警告待处理的更改。见https://stackoverflow.com/a/51145053/2525272。

根据您的环境，您可以使用类似 https://medium.com/front-end-weekly/angular-how-keep-user-from-lost-his-data-by-accidentally-leaving-the-page-before-submit-4eeb74420f0d 的方式扩展 CanDeactivate 防护。或者这个 - 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，它是创建可重用路由保护服务的一个很好的参考。

【讨论】：