时间戳

首页 > 解决方案 > Angular CanDeactivate Guard 不适用于 Sweet Alert JS

angular - Angular CanDeactivate Guard 不适用于 Sweet Alert JS

问题描述

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

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

我错过了什么吗？

标签： angulartypescriptguardsweetalertsweetalert2

解决方案

您必须像使用普通函数一样使用return该功能Swal.fireconfirm

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

推荐阅读