javascript - Angular2-防止ngOnDestroy发生

我有一个页面，该页面具有一种形式，该形式可以在用户离开之前检查用户是否有未保存的更改。

问题在于，即使使用了preventDefault()并返回false，用户仍然可以单击离开组件的位置。

有没有办法防止ngOnDestroy或click事件发生？

注意:用户不会选择不同的路线，只是去往同一组件的另一个标签。

ngOnDestroy() {
    if (this.myForm.dirty) {
        let save = confirm('You are about to leave the page with unsaved changes. Do you want to continue?');
        if (!save) {
            window.event.preventDefault();
            return false;
        }
    }
}

最佳答案

您正在混合两个概念-导航到一条新路线。正确的 Angular 解决方案是实现CanDeactivateGuard。该文档是here。

带有答案的堆栈溢出问题是here。

在您的情况下，用户不会导航到新页面(即，路线不会更改)。他们只是单击一个新选项卡。

如果不查看更多代码，很难知道两个选项卡是同一表单的一部分还是两种不同的表单。

但是无论如何，您都需要另一个选项卡按钮上的点击处理程序，而在该点击处理程序中，您需要检查当前选项卡的数据是否未保存(即，如果该选项卡是一个表单，该表单是否脏了？)。

因此，基本上将您从ngOnDestroy发布的代码移动到该点击处理程序中。