问题描述
我成功构建了 canDeactivate 守卫,它在正常 confirm 下工作正常,但我想用有角度的材质对话框来实现它,在这里我遇到了一些问题.
I successfully built canDeactivate guard and it is working fine with normal confirm but I want to implement it with angular material dialog and here I face some issues.
这是我的守卫:
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CreateQuoteComponent> {
constructor(
public dialog: MatDialog,
){
}
canDeactivate(component: CreateQuoteComponent): boolean {
if (!component.changesSaved) {
return component.confirmDialog();
//return confirm('You have not saved your current work. Do you want to proceed and discard your changes?');
}
return true;
}
}
它是我组件中的一个函数:
It is a function in my component:
confirmDialog(): boolean {
const message = 'You have not saved your current work. Do you want to proceed and discard?';
const data = { 'message': message, 'toShowCancel': true, 'buttonYesCaption': 'Yes', 'buttonNoCaption': 'No' };
const dialogRef = this.dialog.open(YesNoComponent, {
width: '600px',
height: '250px',
data: data
});
dialogRef.afterClosed().subscribe(result=>{
this.dialogRef1=result;
return this.dialogRef1;
});
return this.dialogRef1;
}
I defined a boolean variable dialogRef1 at the top of the component.
它是带有模态窗口的组件的一部分:
It is a part of the component with a modal window:
onCloseClick(){
this.dialogRef.close(false);
}
onSubmit(){
this.dialogRef.close(true);
}
我已尝试实现此示例:如何发送退货关闭 mat-dialog 后 CanDeactivate Guard 的值 |Angular CanDeactivate Guard |角度材质对话框
但这对我不起作用,或者我做错了.提前致谢!
but it doesn't work for me or maybe I have done it wrong. Thanks in advance!
推荐答案
您正在返回一个由 Observable [即 dialogRef.afterClosed()
] 设置的变量值,该值将由用户.您应该执行以下操作:
Your are returning a variable value which is being set by an Observable [i.e dialogRef.afterClosed()
] which will be decided by the user. You should do the following:
首先,将 canDeactivate
的返回类型更改为 Observable
如下:
First, change the return type of canDeactivate
as Observable<boolean>
like this:
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CreateQuoteComponent> {
constructor(
public dialog: MatDialog,
){
}
canDeactivate(component: CreateQuoteComponent): Observable<boolean> {
if (!component.changesSaved) {
return component.confirmDialog();
}
//please import 'of' form 'rxjs/operators'
return of(true);
}
}
现在让我们改变 component.confirmDialog
方法来返回 dialogRef.afterClosed()
observable 像这样:
Now lets change component.confirmDialog
method to return the dialogRef.afterClosed()
observable like this:
confirmDialog(): Observable<boolean> {
const message = 'You have not saved your current work. Do you want to proceed and discard?';
const data = { 'message': message, 'toShowCancel': true, 'buttonYesCaption': 'Yes', 'buttonNoCaption': 'No' };
const dialogRef = this.dialog.open(YesNoComponent, {
width: '600px',
height: '250px',
data: data
});
return dialogRef.afterClosed();
}
希望有帮助.
这篇关于canDeactivate 不适用于 Angular 材质模态窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!