Angular CanDeactivate Guard 不适用于 Sweet Alert JS答案

【问题标题】：Angular CanDeactivate Guard not working with Sweet Alert JSAngular CanDeactivate Guard 不适用于 Sweet Alert JS
【发布时间】：2019-03-06 00:57:37
【问题描述】：

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

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

我错过了什么吗？

【问题讨论】：

标签： angular typescript guard sweetalert sweetalert2

【解决方案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;
        }
    }
}

【讨论】：