javascript - 如何停止 Angular 重复的 api 调用

Question

单击 minister 路由器链接时，我有一个非常简单的 API 调用。它在部长页面打开时显示一些数据。但是我看到每当我从主页或任何其他页面返回该页面时，API 都会再次加载。

minister.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiReadService } from "../apiReadService.service";

interface mydata{
  allMinisters: Object
}

@Component({
  selector: 'app-ministers',
  templateUrl: './ministers.component.html',
  styleUrls: ['./ministers.component.scss']
})
export class MinistersComponent implements OnInit {

  allData:Object = [];

  constructor(private apiRead: ApiReadService) {

  }
  ngOnInit(){
  this.apiRead.getData().subscribe(data=>{
            this.allData  = data.allMinisters;
    }); 
  }
}

apiReadSerivce.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/Http';

@Injectable({
  providedIn: 'root'
})

export class ApiReadService {
    constructor(private http: HttpClient) { }

    getData(){
        return this.http.get('http://localhost:8081/allMinisters')
    }
}

Answer 1

最简单的方法 - 如果您只希望数据加载一次是这样的:

import { shareReplay } from 'rxjs/operators';

export class ApiReadService {
   constructor(private http: HttpClient) { }

   ministers$ = this.http.get('http://localhost:8081/allMinisters')
                         .pipe(shareReplay(1))

   getData() {
      return this.ministers$;
   }
} 

一旦返回结果，它就会被 shareReplay(1)“缓存”，并且每次都返回相同的值。