Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何处理确认框的取消事件?_Javascript_Angular - Fatal编程技术网

Javascript 如何处理确认框的取消事件?

Javascript 如何处理确认框的取消事件?,javascript,angular,Javascript,Angular,如何处理确认框的取消事件? 我的目标是在单击浏览器后退按钮时向用户显示一个确认框,如果用户按下确定按钮,则我必须将其向后重定向(/users),这工作正常,但如果用户按下取消按钮,则我不必转到上一页,但在这两种情况下,它都将转到上一页。 当window.history.pushState({},“user-details”,“/user-details”)运行时,这个.router.navigate(['user-details])根本不工作只是更改url,而不是页面 export class

如何处理确认框的取消事件? 我的目标是在单击浏览器后退按钮时向用户显示一个确认框,如果用户按下确定按钮,则我必须将其向后重定向(/users),这工作正常,但如果用户按下取消按钮,则我不必转到上一页,但在这两种情况下,它都将转到上一页。 当
window.history.pushState({},“user-details”,“/user-details”)运行时,这个.router.navigate(['user-details])根本不工作
只是更改url,而不是页面

export class UserDetailsComponent implements OnInit, OnDestroy {
  r: boolean;
  confirmtxt;
  canceltxt;
  paymentList = [];
  constructor(
    private router: Router,
    private dataService: DataService,
    private location: Location
  ) {
    this.getPaymentSummaryData();
  }    

  ngOnInit() {
    this.location.subscribe(x => {
      console.log(this.location);
      console.log(x);
      if (x.type === "popstate") {
        console.log("data is " + this.paymentList.length);
        const str = String(this.paymentList.length);
        console.log(str);
        this.r = confirm(
          "Are you sure?" +
            " " +
            str +
            " " +
            "applications are in the queue, awaiting decision."
        );
        console.log(this.r);
        if (this.r === true) {
          //  txt = "You pressed OK!";
          this.confirmtxt = "ok";
        } else {
         this.r = false;
  // history.forward();
        }
      }
    });
    console.log(this.r);
  }
 ngOnDestroy() {
    console.log('in destroy' + this.r);
    if (this.r === false) {
this.router.navigate(['user-details']);
  window.history.pushState({}, "user-details", "/user-details");
  this.router.navigate(["user-details"]);
  window.location.reload();
    }
    // this.location.unsubscribe();
  }
}

我不知道为什么
这个.router.navigate(['url'])
不工作。所以我把它改为
this.router.navigateByUrl('/url')
方法。此外,布尔值在开始时将是
未定义的
,因此也需要检查该值。
ngondstroy()中的这两个更改对我都有效

ngOnDestroy() {
    console.log('in destroy' + this.r);
    if (this.r === false) {
     this.router.navigateByUrl('/user-details');

    } else if ( !this.r )  {
           this.router.navigateByUrl("/user-details");
    }
    // this.location.unsubscribe();
  }

为什么您要自己访问
窗口历史记录
?这就是路由器的用途。我尝试使用它作为替代方案,因为这个.router.navigate()没有像我在问题中提到的那样工作。
window.history
只是更改URL,因为这正是您调用的函数应该做的。你从错误的角度看待这个问题。与其尝试用历史API来修复它,不如找出路由器为什么不能正常工作。