Использование Alertify с canDeactivate - PullRequest
Новая
       29

Использование Alertify с canDeactivate

0 голосов
/ 18 марта 2019

Я хочу заменить классическое подтверждение на подтверждение Alertify в canDeactivate. Я пытался реализовать следующие коды, но он не возвращает True, когда нажимаю OK. Кто-нибудь может посоветовать по этому поводу? 

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { SignupComponent } from 'src/app/signup/signup.component';
import { AlertifyService } from 'src/app/_helpers/alertify.service';

@Injectable()
export class SignUpPUS implements CanDeactivate <SignupComponent> {

constructor(private alertifyService: AlertifyService) {}

canDeactivate(component: SignupComponent) {
    if (component.signUpForm.dirty) {

         this.alertifyService.confirm('Leave Page', 'Are you sure you want to continue? Any unsaved changes will be lost', () => {
            return true;
        });

    }
    return false;
}

}

1 Ответ

1 голос
/ 18 марта 2019

Поскольку confirm выполняет асинхронную операцию, вам необходимо использовать асинхронное решение, такое как Observable, Promise или async/await.

Вы можете использовать Observable следующим образом: 

canDeactivate(component: SignupComponent) {
    return new Observable((observer) => {

        if (component.signUpForm.dirty) {

             this.alertifyService.confirm('Leave Page', 'Are you sure you want to continue? Any unsaved changes will be lost', 
               () => {
                 observer.next(true);
               },
               () => {
                 observer.next(false);
               }
             );
        }else{
           observer.next(false);
        }

        observer.complete();
    });

}

Редактировать Примечание: обратите внимание, что я добавил второй обратный вызов для confirm, чтобы убедиться, что он возвращает false, когда пользователь отменяет подтверждение.

...