Question

例如：

“我正在从A页导航到B页。在BI页上，单击了浏览器的后退按钮，这应该使我回到A页，但是我需要通过单击浏览器的后退按钮来避免对A页的API调用。”

Answer 1

如果您指的是“由于加载页面A的JavaScript而发送的API调用”，那么您将需要利用localStorage在页面加载期间将信息保存在浏览器中。要实现这一点，您将必须提供逻辑，以便在调用数据的API之前检查localStorage中的“缓存”信息。这样，如果您的用户点击浏览器上的“后退”按钮，JavaScript将检查localStorage中的API是否已有数据，然后跳过对API的调用。

注意：如果要清除“缓存的”数据，则需要localStorage.clear()或localStorage.removeItem('itemKey')删除该项目。这种逻辑将取决于您的用例。

示例如下：

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html'
})
export class HeroListComponent implements OnInit {

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    if (!window.localStorage.getItem('myData')) {
      this.heroService.loadData().subscribe(
        (data) => window.localStorage.setItem('myData', JSON.stringify(data))
      );
    } else {
      // Load the data by parsing the stored JSON string:
      // const data = JSON.parse(window.localStorage.getItem('myData'))
    }
  }
}

Answer 2

您的页面a和页面b是同一角度站点的一部分吗？如果是这样，则可以将数组作为全局对象存储在服务层中。当您返回到页面b时，只需访问该值即可；如果不为null，则不要进行服务调用。另一个选择是如上所述使用本地存储

在Angular 6中单击浏览器的后退按钮时，如何避免API调用？

2 个答案: