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

Question

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

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;
    });
  }
}