У меня есть приложение Angular 8 с защитой маршрута, которая запрещает пользователю переходить со страницы, если они внесли изменения -
export interface ComponentCanDeactivate {
canDeactivate: () => boolean | Observable<boolean>
}
@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
return component.canDeactivate() ? true : confirm('Warning: You have unsaved changes. Press Cancel to go back or OK to lose these changes.');
}
}
Затем в моем маршрутизаторе
{
path: 'pageone',
component: PageOneComponent,
},
{
path: 'pagetwo',
component: PageTwoComponent,
},
{
path: 'pagethree',
component: PageThreeComponent,
canDeactivate: [PendingChangesGuard]
},
И мой компонент
export class PageThreeAddComponent implements OnInit, ComponentCanDeactivate {
someForm: FormGroup;
...
canDeactivate(): boolean | Observable<boolean> {
return this.someForm.pristine;
}
...
}
Охранник работает нормально, я делаю изменения в форме, которую браузер запрашивает, когда я нажимаю кнопку "Назад". Однако, если я буду следовать этому потоку
- PageOne
- Перейти к PageTwo
- Перейти к PageThree
- Внести изменения
- Нажмите назад
- Нажмите Отмена
- Нажмите еще раз
- Нажмите ОК
На этом этапе я вернулась на два шага к PageOne. Что здесь происходит? Почему я не вернулся на предыдущую страницу? Как будто браузер не понимает, что обратный запрос был отменен. Кто-нибудь сталкивался с этим раньше?