javascript - 不要在单击浏览器的后退按钮时重新加载组件 - Angular

Question

我正在使用 Angular 8.x
From Home 的新闻网站上工作，当用户向下滚动页面并单击新闻链接时，它会将用户带到新闻详细信息页面。现在点击“浏览器的”后退按钮，用户来到“主页”页面，但页面正在重新加载并滚动到顶部。
如何防止主页在单击“返回”按钮时重新加载？

标签： javascriptangularbrowserreloadback-button

Answer 1

您可以创建一个服务，并在您第一次从 api 获取数据时将其缓存在服务中的一个变量中。

下次重新加载新闻列表组件时，它将从服务变量中检查。如果未找到，则 api 调用，否则从服务变量中获取。

像这样的东西。

export class NewsService {
  newsList: News[];

  getSupportedBrowsers(): Observable < SupportedBrowser[] > {

    if (this.newsList) {
      return new Observable < News[] > ((subscriber: Subscriber < SupportedBrowser[] > ) => subscriber.next(this.newsList));
    }

    return this.http.get('url').map(response => {
      this.newsList = response.json();
      
      return this.newsList;
    });
  }
}