如何在Angular5中的页面刷新中添加自定义确认框?

如何在Angular5中的页面刷新中添加自定义确认框?,angular,typescript,Angular,Typescript,我编写了一些代码,它将根据存储在浏览器本地存储器中的标志显示一个确认对话框 if(localStorage.getItem('visitedPage') == 'true') { this.alertService.confirmThis("Are you sure?",function(){ console.log("Yes"); },function(){ console.log("No"); }) } else { localStorage.setItem(

我编写了一些代码,它将根据存储在浏览器本地存储器中的标志显示一个确认对话框

if(localStorage.getItem('visitedPage') == 'true') {
  this.alertService.confirmThis("Are you sure?",function(){
    console.log("Yes");
  },function(){
    console.log("No");
  })
} else {
  localStorage.setItem('visitedPage','true');
}
但我只能在页面刷新后看到该对话框(整个内容消失,页面加载,对话框打开)。但我需要在点击刷新时立即打开对话框


任何建议或例子请

在angular中,如果要捕获刷新事件,可以这样做

//this should be parent component , in your case it should be app.component

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload',['$event'])
  showMessage($event) {
     $event.returnValue='Your data will be lost!';
  }
}

在angular中,如果您想捕获刷新事件,可以这样做

//this should be parent component , in your case it should be app.component

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload',['$event'])
  showMessage($event) {
     $event.returnValue='Your data will be lost!';
  }
}

您想要浏览器参考按钮上的对话框您想要浏览器参考按钮上的对话框我添加了我的对话框而不是警报()。但它刚刚到来,页面被刷新。@Krishna-所以你想停止页面刷新吗?是的。我希望用户确认是否刷新@PranayThank。它起作用了。我可以更改默认的javascript确认框吗?或者至少我可以把文字改一下吗there@Krishna-你可以尝试一下,因为我从未尝试过,如果对你有用,请接受Upvot。我添加了我的对话框,而不是alert()。但它刚刚到来,页面被刷新。@Krishna-所以你想停止页面刷新吗?是的。我希望用户确认是否刷新@PranayThank。它起作用了。我可以更改默认的javascript确认框吗?或者至少我可以把文字改一下吗there@Krishna-你可以尝试一下,因为我从来没有做过,如果对你有用,请接受Upvot