Przekazywanie danych między komponentami

Cześć,

Grzebię w Angularze i natrafiłem na jedną rzecz, której mimo wielu źródeł nie potrafię zrozumieć. Może znajdzie się ktoś kto na prostym przykładzie będzie w stanie mi to prosto wyjaśnić. Mianowicie nie rozumiem jak łatwo przekazywać dane między komponentami, które nie są Child-Parent (bo takich przykladow jest duzo) tylko są jakby "równoległe".
No i mam dajmy na to taki klasyczny przykład.

--- Kluby piłkarskie -> component 1
--- Szczegóły -> component 2
--- service
--- Model danych dla klubów piłkarskich -> ClubsInfo

No i ma to działać tak.

Mamy gdzieś tam jakiś backened, pod który leci request i odpowiada nam danymi zawierającymi kluby piłkarskie. Za komunikację z backened'em odpowiada service. Przy uzyciu modelu danych komponent kluby piłkarskie wyswietli na stronie. Będzie tam też przycisk "Szczegóły" i po jego kliknieciu bedzie nas przenosic na inny url np. \details. No i pytanie jest następujące jak w komponencie Szczegóły\details wyswietlic te same dane dotyczace klubow pilkarskich (wiem ze bez sensu, ale na potrzeby przykladu tak zalozmy ze chce zrobic), nie wywolujac po raz drugi niepotrzebnie metody htttp z serwisu?

---SERVICE---

@Injectable({
  providedIn: 'root'
})
export class HttpServiceService {

  private baseUrl = 'http://localhost:8080/clubs';

  clubsInfo: ClubsInfo[] = [];

  constructor(private httpClient: HttpClient) {
  }

  //GET DATA FROM BACKENED
  getClubList(): Observable<ClubsInfo[]> {
    const searchUrl = `${this.baseUrl}`;
    return this.httpClient.get<GetResponseClubs>(searchUrl).pipe(
      map(response => response._embedded.companyIndexes)
    );
  }
}

interface GetResponseClubs{
  _embedded: {
    companyIndexes: CompanyIndex[];
  },
  page: {
    size: number,
    totalElements: number,
    totalPages: number,
    number: number
  }
}

---ClubsInfo - model danych--

export interface ClubsInfo {

    id: number;
    clubName: String;
    clubPrefix: String;
    imageUrl: String;
    description: String;
}

---KOMPONENT 1 -> Kluby piłkarskie

export class FootballClubs implements OnInit {
  clubInfo: ClubsInfo[] = [];

  constructor(private httpService: HttpServiceService, private route: ActivatedRoute, private router: Router) {
  }

  ngOnInit() {
      this.getClubs();
  }

  //GET DATA
  getClubs(): void {
   this.httpService.getClubList().subscribe(
        (response) => {
          this.clubinfo = response;
        },
        (error: HttpErrorResponse) => {
          alert(error.message);
        });
  }
}

No i mam tak, że po przejściu całej tej ścieżki dane pobrane z backendu związane z klubami piłkarskimi i mogę je wyświetlić w tym komponencie 1 -> kluby piłkarskie
Jakby ktoś mógł mi wytłumaczyć, na przykładzie (prosiłbym o kawałek kodu, bo mimo przykładów internecie nie potrafię zrozumieć sposobów jak można to zrobić tego zrobić tak żeby działało poprawnie) jak to zrobić, że w komponencie 2 -> Details/Szczegoly miec jakas zmienna

clubInfoDetails: ClubsInfo[] = []; i do niej przypisac te same wartosci co w komponencie nr 1. Tylko nie chcialbym znowu wywoływać metody odpytującej backened.

Po co manualnie subscribe robisz na http?
Zostaw sobie w serwisie tylko samego observable.
Później jak wstrzykujesz sobie serwis w komponent napisz sobie wrapper swojej funkcji z observable i pyk async pipem z template jakbyś chciał obrobić te dane to możesz z RxJS map skorzystać i masz co chcesz.

rjakubowski napisał(a):

Po co manualnie subscribe robisz na http?
Zostaw sobie w serwisie tylko samego observable.
Później jak wstrzykujesz sobie serwis w komponent napisz sobie wrapper swojej funkcji z observable i pyk async pipem z template jakbyś chciał obrobić te dane to możesz z RxJS map skorzystać i masz co chcesz.

Wiesz co, przykro mi ale nie jestem w tym bardzo biegły, coś tam w Angularze robiłem na własną rękę, więc potrzebowałbym bardziej łopatologicznie wytłumaczy, najlepiej jakbym dostał jakiś przykład, żeby analogicznie móc zrobić, pogrzebac i zrozumieć. Mógłbyś mi pokazać na tych komponentach i serwisie przyklad? :-)