Доступ к свойствам компонента из CanDeactivate guard

Question

У меня есть несколько форм в приложении, и у меня есть защита CanDeactivate, которая предлагает пользователю подтвердить, хотят ли они покинуть страницу, без предварительного сохранения отредактированных форм. Каждый компонент с формами имеет функцию hasBeenEdited, которая проверяет, была ли форма отредактирована. Поскольку у меня есть только один инъецируемый класс CanDeactivate для обработки всех этих компонентов с помощью форм, мне нужно получить доступ к функции hasBeenEdited компонента, на который в данный момент направлен пользователь. Как лучше всего это сделать? Я видел примеры, когда функции canDeactivate внутри класса guard передается один аргумент компонента, но я не уверен, как передать текущий перенаправленный компонент.

Answer 1

Вы можете попробовать использовать IEdited интерфейс:

interface IEdited {
  hasBeenEdited: (): boolean
}

и пусть ваши компоненты реализуют это, и тогда, возможно, это сработает:

@Injectable()
class CanDeactivateEdited implements CanDeactivate<IEdited> {
  canDeactivate(
    component: IEdited,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): boolean {
    return component.hasBeenEdited();
  }
}

Answer 2

описать интерфейс canDeactivate

export interface CanDeactivateComponent {
  canDeactivate: () => Observable<boolean> | boolean;
}

опишите охрану

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {
  canDeactivate(component: CanDeactivateComponent) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

описать маршрут

 path: 'yourPath',     
 canDeactivate: [CanDeactivateGuard],
 component: YourComponent

и компонент:

 ...
 class YourComponent implements CanDeactivateComponent {
 ...
   canDeactivate() { 
     ... everything you need to detect if you can leave route: return false, 
       or observable
   }