Я не думаю, что это хорошая идея, чтобы заблокировать кнопку назад. Вы можете использовать механизм кэширования для запросов, чтобы он не отправлял запрос на сервер каждый раз, а получал последний ответ. Пожалуйста, проверьте этот пример:
const URL = 'https://api.punkapi.com/v2/beers';
@Injectable({
providedIn: 'root'
})
export class HttpService {
public responseCache = new Map();constructor(private http: HttpClient) {}public getBeerList(): Observable<any> {
const beersFromCache = this.responseCache.get(URL);
if (beersFromCache) {
return of(beersFromCache);
}
const response = this.http.get<any>(URL);
response.subscribe(beers => this.responseCache.set(URL, beers));
return response;
}
}
Если вы все еще хотите, чтобы ваше решение блокировало возвращение пользователя, вам нужно будет использовать Guards для отмены навигации.
@Injectable()
export class MyGuardService implements CanActivate {
constructor(public auth: AuthService, public router: Router) {}
canActivate(): boolean {
return !this.myService.stillDontWantToGoBack()
}}
Это будет для всех переходов, если вам все еще нужен только задний ход, вам нужно будет проверить, совпадает ли URL-адрес, на который вы собираетесь, с previousUrl.
my-service.service.ts
previousUrl: string;
constructor(router: Router) {
router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(e => {
console.log('prev:', this.previousUrl);
this.previousUrl = e.url;
});
}
в my-guard.guard.ts
canActivate(route: ActivatedRouteSnapshot) {
return route.url !== this.myService.previousUrl;
}
Ссылки и дополнительная информация: