Angular CanDeactivate Guard 不适用于 Sweet Alert JS

Question

I'm using CanDeactivate guard in Angular with Sweet Alert js . But ok click is not fired. I'm new to Angular Please assist. Here is the code with sweet alert. Sweet Alert is displayed but ok click not working.

export class QuestionEditGuard implements CanDeactivate<FeedbackQuestionEditPage> {
    canDeactivate(component: FeedbackQuestionEditPage): Observable<boolean> | Promise<boolean> | boolean {
        if (component.questionForm.dirty) {
            const question = component.questionForm.get('description').value || 'New Question';
            swal.fire({
                title: 'Hey there!!',
                text: `Navigate away and lose all changes to ${question}?`,
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'OK',
            }).then((result) => {
                return true;
            });

            return false;
        }
        return true;
    }
}

But with normal Confirm it works.

export class QuestionEditGuard implements CanDeactivate<FeedbackQuestionEditPage> {
    canDeactivate(component: FeedbackQuestionEditPage): Observable<boolean> | Promise<boolean> | boolean {
        if (component.questionForm.dirty) {
            const question = component.questionForm.get('description').value || 'New Question';
            return confirm(`Navigate away and lose all changes to ${question}?`);
        }
        return true;
    }
}

Am I missing anything?

Answer 1

You have to return the Swal.fire function as you do with the normal confirm

export class QuestionEditGuard implements CanDeactivate<FeedbackQuestionEditPage> {
    canDeactivate(component: FeedbackQuestionEditPage): Observable<boolean> | Promise<boolean> | boolean {
        if (component.questionForm.dirty) {
            const question = component.questionForm.get('description').value || 'New Question';
            return swal.fire({ // <- return here
                title: 'Hey there!!',
                text: `Navigate away and lose all changes to ${question}?`,
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'OK',
            }).then((result) => {
                if (result.value) {  // check if OK pressed
                    return true;
                } else {
                    return false;
                }
            })
        } else {
            return true;
        }
    }
}