我想用canDeactivate中的Alertify确认替换经典确认。我尝试实现以下代码,但单击确定时它不会返回True。任何人都可以就此提出建议吗?
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;
}
}
由于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。