Как кешировать http запрос в angular 5?

Question

Я реализовал HTTP-запрос кэширования в приложении Angular 5. Однако моя проблема в том, что написанный мной код будет сохранять данные из первого попадания Http из API, скажем « API1 », а затем будет получить данные из хранимой переменной, т.е. страны . Но если я снова вызову эту службу с другим API2 , тогда она будет извлекать значение из страны .

Код моего компонента:

import { Component, OnInit } from '@angular/core';
import { CacheService } from '../cache.service';

 @Component({
 selector: 'app-caching',
 templateUrl: './caching.component.html',
 styleUrls: ['./caching.component.css']
})
export class CachingComponent implements OnInit {
constructor(private cacheService:CacheService){}
countries;
ngOnInit() {
  this.cacheService.get()
  .subscribe(res => {
    this.countries = res;
  });
 }
}

Мой сервисный код:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class CacheService {
  countries;

  constructor(private http:HttpClient) {}

  public get(): Observable<any> {
    if(this.countries != null) {
      console.log("Fetching Data From Cache!!!",this.countries);
      return Observable.of(this.countries);
    } 
    else {
      console.log("Fetching Data From Hit!!!"); 
      return this.http.get('https://jsonplaceholder.typicode.com/posts', {})
        .map((data) => {
          console.log(data);
          this.countries = data;
        })
        .publishReplay(1)
        .refCount();
    }
  }
}

Я хочу, чтобы различные обращения к API кэшировались индивидуально.