Question

在用户切换到另一个状态或关闭页面时，弹出一个窗口询问用户是否确实要离开当前页面。如果用户选择不离开，则阻止状态转换。

有办法吗？

注意：该项目使用 Angular 2/4 和 ui-router。

我知道在角度1.x中您可以使用$stateChangeStart事件并执行event.preventDefault()来停止状态更改。 Angular 2/4中有类似的东西吗？

Answer 1

尝试使用 UI-ROUTER 的TransitionService及其onBefore()方法。

正如UI-ROUTER's site所述：

注册转换生命周期钩子，在转换开始之前调用该钩子。此挂钩可用于实现阻止甚至启动转换的逻辑，例如身份验证，重定向

...

钩子的返回值可用于暂停，取消或重定向当前的转换。

...

false：转换将被取消

停止过渡：

transitionService.onBefore({ to: 'home' }, (trans: Transition) => {
  // put here you conditional logic
  if ('the user choose not to leave') {
    return false;
  }
  // if you want to redirect to different location use:
  // trans.router.stateService.target("home.dashboard"));
});

Answer 2

您可以收听此类unload或beforeunload事件：

export class AppComponent {
  @HostListener('window:unload', [ '$event' ])
  unloadHandler(event) {
    // open popup
  }

  @HostListener('window:beforeunload', [ '$event' ])
  beforeUnloadHandler(event) {
    // open popup
  }
}

如何使用ui路由器阻止角度2/4项目的状态更改？

2 个答案: