Angular2：如何prevent /废掉历史操作，同时实施routerCanDeactivate？

问题描述

routerCanDeactivate（）成功prevents导航远离组件。

  routerCanDeactivate（nextInstruction：ComponentInstruction，prevInstruction：ComponentInstruction）
  {
    返回确认（你要放弃未保存的更改？）;
  }
 

但是，如果导航是由浏览器的引起回按钮或任何其他 history.back（）触发，

那么它不保留完整的历史和触发器 popState 在每次触发，最终定位到浏览器的主页（在Chrome测试）。

---

编辑：

我在一个变量保存当前组件的网址 currentLocation 和

试图操纵历史与历史API ​​，但

只是无法弄清楚，以保持它的完整所需的API调用的正确顺序。

  routerCanDeactivate（nextInstruction：ComponentInstruction，prevInstruction：ComponentInstruction）{
    history.replaceState（NULL，NULL，this.currentLocation）;
    history.forward（）;
    返回确认（你要放弃未保存的更改？）;
  }
 

解决方案

由于 window.onpopstate 在每一个返回按钮点击触发，

我认为，一个 pushState的是必需的。但事实并非如此，并按照code完美的作品。

  routerCanDeactivate（nextInstruction：ComponentInstruction，prevInstruction：ComponentInstruction）{
    如果（确认（你要放弃未保存的更改？））{
      返回true;
    }
    其他{
      history.forward（）;
      返回false;
    }
  }
 

不过，这将是很好，如果有人能解释发生了什么。

因为我不具备多少知识历史API ​​。在此先感谢！

routerCanDeactivate() successfully prevents navigation away from component.

routerCanDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) 
  {
    return confirm("Do you want to discard unsaved changes ?");
  }

But if navigation is caused by Browser's back button or any other history.back() trigger,

then it doesn't keep the history intact and triggers popState on every trigger and eventually navigates to Browser's homepage (tested on Chrome).

---

EDIT:

I saved current component's URL in a variable currentLocation and

tried to manipulate history with history api but

just couldn't figure out the right order of api calls required to keep it intact.

routerCanDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
    history.replaceState(null,null, this.currentLocation);
    history.forward();
    return confirm("Do you want to discard unsaved changes ?");
  }

解决方案

Due to window.onpopstate triggering at every back button click,

I thought that a pushState will be required. But that wasn't the case, and following code works perfectly.

routerCanDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
    if(confirm("Do you want to discard unsaved changes ?")){
      return true;
    }
    else {
      history.forward();
      return false;
    }
  }

But it would be nice if somebody could explain what is happening

because I don't have much knowledge of history api. THANKS IN ADVANCE!

这篇关于Angular2：如何prevent /废掉历史操作，同时实施routerCanDeactivate？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！