angular - 如何使用angular2 Material 对话框来阻止canDeactivate

如果用户从具有脏表单的页面导航，我可以成功地使用canDeactivate提供警告消息:

我正在使用的代码在这里:

    is_submit = false;
   canDeactivate() {
       //https://scotch.io/courses/routing-angular-2-applications/candeactivate
        if (this.myForm.dirty == true && this.is_submit==false){
            return window.confirm('Discard changes?');
        } //end if
        return true
    } // end  canDeactivate

这是我得到代码的地方:

https://scotch.io/courses/routing-angular-2-applications/candeactivate

但是我想使用angular2对话框。这是我的代码:

    //ts for the main component

    is_submit = false;
   canDeactivate() {
        if (this.myForm.dirty == true && this.is_submit==false){
            const config = new MdDialogConfig();
            config.disableClose=true;
            let dialogRef = this.dialog.open(DialogCanDeactive,config);
            dialogRef.afterClosed().subscribe(result => {
                if (result=='cancel'){
                    return false;
                }
                if (result=='save'){
                    return true;
                }
                if (result=='discard'){
                    return true;
                }
            }); //end dialogRef
        } //end if
        return true
    }

 ///Code for the dialog

@Component({
  selector: 'can_deactive_dialog',
  template: `
<div>
    <button md-raised-button (click)="dialogRef.close('cancel')">Cancel</button>
    <button md-raised-button (click)="dialogRef.close('save')">Save Changes</button>
    <button md-raised-button (click)="dialogRef.close('discard')">Discard Changes</button>
</div>
`,
})
export class DialogCanDeactive {


  constructor(public dialogRef: MdDialogRef<DialogCanDeactive>) {} //end constructor

}

当我离开时会发生以下情况:

1)我转到导航页面

2)然后显示对话框。

像下面的代码一样如何拥有Dialog块？

    window.confirm('Discard changes?')

最佳答案

canDeactivate 方法还可以返回Promise或Observable。您应该返回该值并解决 promise ，或者在可观察到的值上发出您想要的结果的值。

在您的特定示例中，您可以从 afterClosed 方法中返回observable，而不是订阅该方法，只需将其映射为 bool 值即可:

return dialogRef.afterClosed().map(result => {
                if (result=='cancel'){
                    return false;
                }
                if (result=='save'){
                    return true;
                }
                if (result=='discard'){
                    return true;
                }
            }).first();

另外，我会从后卫中移出该逻辑，例如在组件中，然后从那里调用方法。

关于angular - 如何使用angular2 Material 对话框来阻止canDeactivate，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45251348/