angular - 使用提交按钮时不要使用 CanDeactivate 守卫

Question

这是我的 canDeactivate 守卫，它可以工作。但是我不想在使用提交按钮时调用守卫。只有当我通过任何其他方式导航时。怎么办？

import { Injectable } from '@angular/core';
import { Router, CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
    myForm: FormGroup;
}

@Injectable()
export class DirtyGuard implements CanDeactivate<FormComponent>  {
  constructor(private router: Router) {}

  canDeactivate(component: FormComponent) {
      console.log(component.myForm)
        if (component.myForm.dirty ){
            return confirm('You have unsaved changes. Are you sure you want to navigate away?');
        }
        return true;
  }
}

 <button md-raised-button [disabled]="!myForm.valid" type="submit" color="primary">
                            <i class="material-icons">arrow_forward</i>
                            Exposures: Currencies
                        </button>

Answer 1

[angular v.4 - 未在 v.2 上测试，但应该可以工作]

守卫“canDeactivate”被正确调用，但您只想为您提交的场景返回 true，那么我们如何确定呢？您已经有了 FormGroup 的句柄，但是这似乎没有与提交相关的属性。作为替代方案，您可以使用组件类中的 @ViewChild 装饰器获取表单句柄，如下所示:

@ViewChild('myForm') myForm;

为了让它工作，你必须为你的表单添加一个局部变量，如下所示:

<form #myForm="ngForm" (ngSubmit)="onSubmit()">

然后您将在名为 _submitted 的 myForm 对象上看到一个属性。这允许您更新您的 if 条件以仅在脏 && !submitted 时显示确认消息。例如:

if (this.myForm.form.dirty && !this.myForm._submitted ){
    return confirm('You have unsaved changes. Are you sure you want to navigate away?');
}
return true;

根据发布的日期，我假设您已经解决了这个问题，但这至少可以解释发生了什么。