Question

我正在使用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;
  }
}

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

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

我还试图将后卫添加到主后卫，但也没有起作用。

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

这里有修复程序吗？

谢谢

Answer 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，为创建可重用的路由保护服务提供了很好的参考。

刷新页面时CanDeactivateGuard不起作用

1 个答案: