1

我正在处理一个有很多表单页面的项目，我想在最终用户尝试导航到另一条路线而不保存更改时向他们提供提示。在所有页面中，我使用的是这样的反应形式

this.mainForm = this.formBuilder.group(...

那么我可以让一个可以为我的所有组件停用Guard 的东西吗？

@Injectable()
class CanDeactivateTeam implements CanDeactivate<... something magic here want to pass component dynamically...> {

constructor() {}

canDeactivate(
    component: ...dynamicComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
    ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
        if(!this.mainForm.dirty) return true;
    }
}

是否可以对所有页面进行相同的禁用保护以防止表单更改？

提前致谢。

4

1 回答 1

1

您将需要表单基础组件。基本组件将具有检查表单是否脏并返回解析为布尔值的承诺的功能。

在您的 CanDeactivateGuard 中，您可以调用此函数。现在您只需要从这个基础组件继承所有表单组件并更新路由集 canDeactivate。

//CanDeactivateGuard.ts

export class CanDeactivateGuard implements CanDeactivate<AdminFormBaseComponent> {
     canDeactivate(component: FormBaseComponent): Observable<boolean> | boolean 
     {
        return component.verifyChangesAndConfirm();
     }
}


//FormBaseComponent.ts
export class FormBaseComponent{
   @ViewChild('form', { static: true }) form;

   public verifyChangesAndConfirm(): Observable<boolean> | boolean {
      if (this.form && !this.form.submitted && this.form.dirty) {
         var subject = new Subject<boolean>();
         this._modalService.ShowConfirmDialog(() => {
            //yes
            subject.next(true);
         }, () => {
            //no
            subject.next(false);
         });
         return subject.asObservable();
     }
     return true;
   }
}

//SomeDataEntryFormComponent.ts
export class SomeDataEntryFormComponent extends FormBaseComponent implements 
OnInit {
   //Other code
}

并且在路由配置中应该有以下条目

{ path: 'some-data-entry-form', component: SomeDataEntryFormComponent, canDeactivate: 
[CanDeactivateGuard] },

您将必须实现模态服务并注入，以便 _modalService.ShowConfirmDialog 工作。

于 2020-01-15T17:07:18.203 回答