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

Question

我正在使用 Angular 8.x
开发新闻网站 在主页上，当用户向下滚动页面并单击新闻 link 时，用户会转到新闻详细信息页面。现在点击 "browser's" 后退按钮，用户来到 "Home" 页面，但页面正在重新加载并滚动到顶部。
如何防止主页在单击 "back" 按钮时重新加载？

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