Angular CanDeactivate Guard 无法与 Sweet Alert JS 一起使用

Question

我在 Angular 和 Sweet Alert js 中使用 CanDeactivate 守卫。但是确定点击没有被解雇。我是 Angular 的新手，请帮忙。这是带有甜蜜警报的代码。显示 Sweet Alert 但 ok 单击不起作用。

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;
    }
}

但正常 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 confirm(`Navigate away and lose all changes to ${question}?`);
        }
        return true;
    }
}

我错过了什么吗？

Answer 1

您必须 return Swal.fire 功能，就像您使用正常的 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;
        }
    }
}

Angular CanDeactivate Guard 无法与 Sweet Alert JS 一起使用

Angular CanDeactivate Guard not working with Sweet Alert JS

guard

typescript

sweetalert

angular

sweetalert2