Dynami c canDeactivate Guard: Показать подтверждающее сообщение перед тем, как отойти от формы с изменениями - PullRequest
Новая
       50

Dynami c canDeactivate Guard: Показать подтверждающее сообщение перед тем, как отойти от формы с изменениями

1 голос
/ 15 января 2020

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

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

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

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

1 Ответ

1 голос
/ 15 января 2020

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

В вашем 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 работал.

...