[英]How to make CanDeactivate work with kendo-ui angular dialog
I'm trying to implement this CanDeactivate Route Guard using kendo-ui angular dialog instead of the window.confirm,我正在尝试使用 kendo-ui angular 对话框而不是 window.confirm 来实现此CanDeactivate Route Guard ,
It works fine with window.confirm but with kendo-ui dialog only the second time I execute the dialog.它适用于 window.confirm 但仅在我第二次执行对话框时才适用于 kendo-ui 对话框。 The first time the method
this.confirmCanExitDialog()
returns false even if I click Yes and the second time I execute the dialog by trying to navigate somewhere else, it returns true. this.confirmCanExitDialog()
方法第一次返回 false,即使我单击是,第二次我通过尝试导航到其他地方来执行对话框时,它返回 true。
The problem I have is that this line return this._canExitResult$$.value;
我遇到的问题是这一行
return this._canExitResult$$.value;
executes before the dialog.result even if I make the method return an Observable<boolean>
, the result is always false (initial value).在 dialog.result 之前执行,即使我使该方法返回
Observable<boolean>
,结果始终为 false(初始值)。 Please help.请帮忙。
public canExit(): boolean {
return this.form.dirty ? this.confirmCanExitDialog() : true;
}
private confirmCanExitDialog(): boolean {
const dialogRef = this.dialogService.open({
content: ConfirmDialogComponent,
});
const confirmDialog = dialogRef.content.instance as ConfirmDialogComponent;
confirmDialog.message = 'Confirmation.CanExit';
dialogRef.result.subscribe((result: DialogCloseResult) => {
if (result === 'Yes') {
this._canExitResult$$.next(true);
}
if (result === 'No') {
this._canExitResult$$.next(false);
}
});
return this._canExitResult$$.value;
}
window.confirm
is a blocking call and this is why this code works: window.confirm
是一个阻塞调用,这就是这段代码有效的原因:
public canExit(): boolean {
return this.form.dirty ? window.confirm() : true;
}
If you want to use non-blocking dialog like kendo, then you have to return Observable
/ Promise
:如果你想像剑道一样使用非阻塞对话框,那么你必须返回
Observable
/ Promise
:
canDeactivate(component: any, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return this.form.dirty ? this.confirmCanExitDialog() : of(true);
}
private confirmCanExitDialog(): Observable<boolean> {
const dialogRef = this.dialogService.open({
content: ConfirmDialogComponent,
});
const confirmDialog = dialogRef.content.instance as ConfirmDialogComponent;
confirmDialog.message = 'Confirmation.CanExit';
return dialogRef.result.pipe(map(x => x === 'Yes'));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.