Question

为了能够使用浏览器后退按钮关闭我的（动态添加的）模态，一旦模态打开，我就要向我的网址添加#modal哈希值。按下浏览器的后退按钮后，我将收听弹出状态，检查是否有模式打开并将其删除。当不使用浏览器后退按钮而关闭模态时，我执行history.back（）并删除模态。副作用是历史记录中还有一个前进路径，即#modal哈希。

有没有办法摆脱这种向前的历史？

我尝试向后导航到相同的URL，但这似乎无济于事。我也在我的应用程序中使用queryParams，但我认为这不会影响此处的任何内容。

打开模态时，我添加#modal：

this.router.navigate([], {fragment: 'modal', queryParamsHandling: 'merge'})

处于弹出状态：

location.onPopState( () => {
  if(this.modalCount > 0){
    this.removeAllModals();
    const routerSub = this.router.events.subscribe(event => {
      if(event instanceof NavigationEnd) {
        this.router.navigate([], {replaceUrl:true, queryParamsHandling: 'merge';
        routerSub.unsubscribe();
      }
    })
  }
})

Answer 1

使用

navigateByUrl（）

根据提供的网址进行导航。此导航始终绝对的。

它将通过定义的路径替换整个网址

location.onPopState( () => {
  if(this.modalCount > 0){
    this.removeAllModals();
    this.router.events.subscribe(event => {
      if(event instanceof NavigationEnd) {
        this.router.navigateByUrl('');         
      }
    })
  }
})

Angular2 + |向后浏览后删除转发历史记录

1 个答案: