javascript - 路由防护中的 Angular 2 对话框可以停用

Question

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

我尝试过使用提示和确认，但它们只能让我同时有 2 个按钮，而我需要 3 个按钮来同时显示"is"、“否”、“取消”。

我的问题是，虽然我可以弹出对话框，但我不知道如何让 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 tutorial是关于这个的。您可以随时显示/隐藏弹出窗口，并且可以在其中添加自己的标签，包括按钮。然后，您可能需要一个函数，它将根据用户完成的操作接收输入，并将带有正确参数的函数调用添加到按钮的 onclick 中。