Javascript 将Alertify与canDeactivate一起使用
我想用canDeactivate中的Alertify confirm替换经典的confirm。我尝试实现以下代码,但当单击OK时它不会返回True。有人能对此提出建议吗Javascript 将Alertify与canDeactivate一起使用,javascript,angular,alertify,Javascript,Angular,Alertify,我想用canDeactivate中的Alertify confirm替换经典的confirm。我尝试实现以下代码,但当单击OK时它不会返回True。有人能对此提出建议吗 import { Injectable } from '@angular/core'; import { CanDeactivate } from '@angular/router'; import { SignupComponent } from 'src/app/signup/signup.component'; impor
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;
}
}当确认执行异步操作时,您需要使用异步解决方案,如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();
});
}
编辑说明:请注意,我为确认添加了第二次回调,以确保在用户取消确认时返回false。我必须做一些细微的更改才能使此工作正常。。。但接近于@Harun Yimaz的答案 AlertifyService.ts
import * as alertify from 'alertifyjs';
confirmCancel(
message: string,
okCallback: () => any,
cancelCallback: () => any
) {
alertify.confirm(message, okCallback, cancelCallback);
}
在警卫室
constructor(private alertify: AlertifyService) {}
canDeactivate(component: MemberEditComponent) {
return new Observable<boolean>(observer => {
if (component.editForm.dirty) {
this.alertify.confirmCancel(
'Are you sure you want to continue? Any unsaved changes will be lost',
() => {
observer.next(true);
observer.complete();
},
() => {
observer.next(false);
observer.complete();
}
);
} else {
observer.next(true);
observer.complete();
}
});
必须在下一步之后致电observer.complete,observable才能正确完成。请添加AlertifyService的代码