Dynamic canDeactivate Guard: показывать сообщение о подтверждении перед уходом из формы с изменениями

Question

Я работаю над проектом с большим количеством страниц форм, я хочу дать понять конечному пользователю всякий раз, когда он пытается перейти на другой маршрут без сохранения своих изменений. На всех страницах я использую реактивные формы примерно так

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;
    }
}

можно ли так же отключить защиту для всех страниц, чтобы предотвратить изменение формы?

Заранее спасибо.

Answer 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 работал.