如何在单击浏览器后退按钮 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({

  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 相同。

我的服务.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;

}