路线防护中的Angular 2对话框可以激活

Question

I've been trying to figure out how to do this, if there are unsaved pages in the route, I want a dialog to popup and ask if the user wishes for data to be saved or not or cancel completely.

I've tried to use prompt and confirm but those only let me have 2 buttons at once while I need 3 buttons to display the Yes, No, Cancel at the same time.

My problem is that while I can get the dialog to popup I don't know how to make Angular 2 wait for user selection before proceeding, I've tried it with both Javascript and Jquery, but still can't figure out how to make angular wait for the user input and then act on the selection.

All tips are welcome! :)

A little plunker here, click to bar, then foo then bar again to have the popup show up, not sure how to make it wait for the value in the same time as now it just uses the previous value that was set

    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

You can write your own HTML and CSS to have a div which will act as a popup. There are very good tutorial s about this. You will show/hide the popup whenever you wish and you can add your own tags there, including the buttons. Then, you might want a function which will receive an input according to the action which was done by the user and add the function call with the right parameter to the onclick of your buttons.