У меня есть функция стрелки браузера назад в функции конструктора, форма не загрязнена, тогда навигация браузера будет работать, иначе она должна поддерживать тот же маршрут. Но моя проблема заключается в том, что эта функция вызывается несколько раз в концепции всплывающего окна. Как избежать этого пузырькового эффекта.
abcd.component.ts
constructor(private location: LocationStrategy,
private someNavigationService: SomeNavigationService
) {
console.log('ticket page constructor');
let a = 0;
this.location.onPopState(() => {
console.log(++a);
console.log('Click back');
if (this.formService.formGroup.dirty && !this.ticket){
this.close(); // check the form is
}
console.log("After back");
return false;
})
close() { closeConfirmation = confirm("Please note that all information entered will be deleted. Press ok to continue.");
if (closeConfirmation){
this.someNavigationService.enableBack = false;
return true;
}else {
this.someNavigationService.enableBack = true;
return false;
}
}
abcd.service.ts
@Injectable({
providedIn: 'root'
})
export class SomeNavigationService {
constructor() {}
public enableBack = false;
getBackClicked() {
return this.enableBack;
}
}
abcd.guard
@Injectable({ providedIn: 'root'})
export class NavigationGuard implements CanDeactivate<any> {
constructor(private someNavigationService: SomeNavigationService) {}
canDeactivate(component: any) {
// will prevent user from going back
if (this.someNavigationService.getBackClicked()) {
this.someNavigationService.enableBack = false;
// push current state again to prevent further attempts.
history.pushState(null, null, location.href);
return false;
}
return true;
}
}
abcd.routing
{
path: 'create-abcd',
component: AbcdComponent,
outlet: 'action',
canDeactivate: [NavigationGuard],
}
после нажатия кнопки будет вызван конструктор abcd, и маршрутизатор будет выглядеть следующим образом http://localhost: 4200 / main / need-acces / (action: create- ABCD)