如何在单击浏览器后退按钮 Angular 时将用户重定向到特定页面

Question

所以我必须在几个路由上“禁用”点击浏览器后退按钮，因为已经发送了对 backeng 的请求，并且创建大量类似的 api 请求是不一致的。基本上我正在使用

this.location.onPopState(() => {

  console.log('pressed back!');

  this.router.navigateByUrl('url', { skipLocationChange: true })

});

在构造函数中检测后退按钮单击，问题是当我单击后退时，我没有重定向到所需页面，而是重定向到上一个页面。我试过，location.here= url;但它重新加载窗口并仍然显示前一页一秒钟。请，如果您有任何建议，我将不胜感激。

Answer 1

我认为阻止后退按钮不是一个好主意。您可以对请求使用缓存机制，这样它就不会每次都将请求发送到服务器，而是获得最新的响应。请检查这个例子：const URL = 'https://api.punkapi.com/v2/beers';@Injectable({&nbsp; providedIn: 'root'})export class HttpService {&nbsp; public responseCache = new Map();constructor(private http: HttpClient) {}public getBeerList(): Observable<any> {&nbsp; &nbsp; const beersFromCache = this.responseCache.get(URL);&nbsp; &nbsp; if (beersFromCache) {&nbsp; &nbsp; &nbsp; return of(beersFromCache);&nbsp; &nbsp; }&nbsp; &nbsp; const response = this.http.get<any>(URL);&nbsp; &nbsp; response.subscribe(beers => this.responseCache.set(URL, beers));&nbsp; &nbsp; return response;&nbsp; }}如果您仍然希望您的解决方案阻止用户返回，则需要使用 Guards 来取消导航。@Injectable()export class MyGuardService implements CanActivate {&nbsp;&nbsp;&nbsp; constructor(public auth: AuthService, public router: Router) {}&nbsp;&nbsp; &nbsp; canActivate(): boolean {&nbsp; &nbsp; &nbsp; return !this.myService.stillDontWantToGoBack()&nbsp; &nbsp; }}这将适用于所有导航，如果您仍然只想要返回，则需要检查您要访问的 URL 是否与 previousUrl 相同。我的服务.service.tspreviousUrl: string;constructor(router: Router) {&nbsp; router.events&nbsp; &nbsp; .filter(event => event instanceof NavigationEnd)&nbsp; &nbsp; .subscribe(e => {&nbsp; &nbsp; &nbsp; console.log('prev:', this.previousUrl);&nbsp; &nbsp; &nbsp; this.previousUrl = e.url;&nbsp; &nbsp; });}&nbsp;在 my-guard.guard.tscanActivate(route: ActivatedRouteSnapshot) {&nbsp; return route.url !== this.myService.previousUrl;}