离开页面时未保存表单时发出警报（打字稿）

Question

我有带有代码的ts脚本来处理"unsaved"文本输入

这是脚本的代码

export class Unsave {
    public static unsave_check(): void {
        let unsaved = false;
        $(":input").change(function(){ 
            unsaved = true;
            console.log(unsaved);
        });

    function unloadPage(){ 
        if(unsaved){
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }

    }
}

然后我在其他脚本中使用它

`window.onbeforeunload = Unsave.unsave_check();`

但是如我所见， function unloadPage()从未被命中，为什么呢？ 我看到未保存的值正在更改为true。 但是当我回去时，没有收到任何警告消息。

如何解决此问题？

感谢帮助

Answer 1

我想你应该叫Unsave.unsave_check()当表单已初始化并绑定unloadPage上window.onbeforeunload （你可以把它亦静-或其他方法非静态和实例化对象）。 您还应该将unsaved的值从函数范围中移出，也许移到私有类字段中，以便两个方法都可以访问它

export class Unsave {
    private unsaved: boolean = false;

    public register() {
        $(":input").change(() => {
            this.unsaved = true;
            console.log(this.unsaved);
        });
    }

    public unloadPage() {
        if (this.unsaved) {
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }
}

// call this after form init
const unsaveChecker = new Unsave();
unsaveChecker.register()
window.onbeforeunload = () => unsaveChecker.unloadPage()

Answer 2

您应该使用unloadPage在window.onbeforeunload调用unloadPage ：

export class Unsave {
    private static unsaved: boolean = false;
    public static unsave_check(): void {
        Unsave.unsaved = false;
        $(":input").change(function(){ 
            Unsave.unsaved = true;
            console.log(Unsave.unsaved);
        });
    }
    public static unloadPage(): string { 
        if(Unsave.unsaved){
            return "You have unsaved changes on this page. Do you want to     leave this page and discard your changes or stay on this page?";
        }
    }

}

然后window.onbeforeunload = Unsave.unloadPage(); 在代码的其他地方，您必须调用unsave_check ...
例如：

document.addEventListener("DOMContentLoaded", function() {
    Unsave.unsave_check();
});

注意： unloadPage和unsave_check的命名方式不一致...一种是骆驼案，一种是蛇案？