Question

在我的项目中，当我想向用户显示某种信息时，我正在使用弹出窗口。

出现弹出窗口时，如何控制设备后退按钮导航到上一条路线，而是关闭弹出窗口？

代码是这样的

<div class="btn" (click)="showPopup()">Button to show popup</div>

<div class="popup" id="popup">A popup</div>

showPopup(){
   document.getElementById("popup").style.display="block"
}

onBackButtonPressed(){
   //Do not navigate back to the previous route
   document.getElementById("popup").style.display="none"
}

因此，当我单击按钮并显示弹出窗口时，当用户按下设备后退按钮时，我想关闭弹出窗口而不是向后导航。

Answer 1

特里克要向前开窗。它是这样的：

  @HostListener('window:popstate', ['$event'])
  onpopstate(event) {
    var popup = document.getElementById("popup")

    if (popup != null) {
      if (window.getComputedStyle(popup).display === "block") {
        popup.style.display = "none"
        ********
        window.history.forward()
        ********
      }
    }
  }

可能不是最好的答案，它会稍有延迟，因为它先返回然后返回向前，但是现在可以解决问题。

任何其他答案将不胜感激

防止设备后退按钮导航到上一条路线

1 个答案: