Да, я знаю, что это duplicate issue
, но предыдущий пост не решает это.
Защитный код:
canDeactivate(component: ExamEndedComponent,
currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.store.select(fromRoot.getExamStatus)
.pipe(
take(1),
map((res: string) => {
console.log(res);
if (res === 'started') {
alert('stop');
console.log(currentState.url);
return false;
}
return true;
})
);
}
, но проблема в том, что при нажатии на back button
в браузере защита запускается только один раз, поэтому, когда пользователь clicking again
действительно может уйти.
Также проверил вопрос в угловых : https://github.com/angular/angular/issues/12851
но он пытается решить проблему, снова перейдя к текущему маршруту, прежде чем вернуть false, как показано ниже:
canDeactivate(component: ExamEndedComponent,
currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.store.select(fromRoot.getExamStatus)
.pipe(
take(1),
map((res: string) => {
console.log(res);
if (res === 'started') {
alert('Deactivation blocked');
console.log(currentState.url);
this.router.navigate([currentState.url]);
return false;
}
return true;
})
);
}
В этот момент оповещение вызывается дважды, потому что перед возвратом false я перехожу к currentState, чтобы угловые прогоны можно было снова деактивировать, но после повторного нажатия на кнопку «назад» canDeactivate не вызывается.
Таблица маршрутизации:
const appRoutes: Routes = [
{ path: 'Authentication', component: AuthComponent},
{path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent, children: [
{path: '', redirectTo: 'exam', pathMatch: 'full'},
{path: 'exam', component: ExamComponent, children: [
{path: '', redirectTo: 'start', pathMatch: 'full'},
{path: 'start', component: ExamStartComponent},
{path: 'started', component: ExamQuestionsComponent,
canActivate: [ExamQuestionsGuard],
canDeactivate: [ExamStartedDeactivateGuard]},
{path: 'ended', component: ExamEndedComponent, canDeactivate: [ExamStartedDeactivateGuard]}
], resolve: {exam: ExamResolver}}
],
canActivate: [AuthGuard], resolve: {sign: SignInResolver}}
];
В чем проблема? Заранее спасибо.