路由保护中的 Angular 2 对话框可以停用

Question

我一直在试图弄清楚如何做到这一点，如果路线中有未保存的页面，我希望弹出一个对话框并询问用户是否希望保存数据或完全取消。

我尝试过使用提示和确认，但那些只让我一次有 2 个按钮，而我需要 3 个按钮来同时显示是、否、取消。

我的问题是，虽然我可以弹出对话框，但我不知道如何让 Angular 2 在继续之前等待用户选择，但我已经使用 Javascript 和 Jquery 进行了尝试，但仍然无法弄清楚如何让 Angular 等待用户输入，然后对选择进行操作。

欢迎所有提示！ :)

这里有点麻烦，点击 bar，然后 foo 然后 bar 再次显示弹出窗口，不知道如何让它在等待值的同时等待值，因为它现在只使用之前设置的值

    if (target.hasBeenChanged == true) {

        target.popuptest();
        // using the last one set in component for now
        let selection = target.popupchoice;

        console.log('selected was: ' + selection);


        if (selection == 'yes') {
            target.PushToSave();
            return true;
        } else if (selection == 'no') {
            return true;
        } else {
            return false;
        }
    } else {
        return true;
    }

https://plnkr.co/edit/so7KeiaMiqbSy7Nr5nSB?p=info

Answer 1

您可以编写自己的 HTML 和 CSS 来拥有一个 div，它将充当弹出窗口。关于这个有very good tutorials。您可以随时显示/隐藏弹出窗口，并且可以在其中添加自己的标签，包括按钮。然后，您可能需要一个function，它将根据用户执行的操作接收输入，并将具有正确参数的函数调用添加到按钮的 onclick。