Как я могу поделиться данными из http Response между компонентами?

Question

Я разрабатываю приложение, которое должно отправлять http-запрос третьему API.Когда я делаю процесс аутентификации, Api предоставляет мне ключ (он называет clientid), который я должен публиковать с другими данными для будущих http-запросов.

Так что дело в том, что после аутентификации в Api, когда яхочу сделать любой другой запрос, я должен опубликовать клиент, который я взял из ответа аутентификации.

Я читал об отношениях между родителями и детьми (@ input- @ output), но я думаю, что это не помогает, потому что приложение будет делать разные запросы из разных компонентов, которые могут быть не связаны между собой.

Моя идея состоит в том, что, когда я заканчиваю процесс аутентификации из соответствующих сервисов, мне нужно было где-то хранить это поле, чтобы быть доступным, когда я хочу сделать другой запрос из любого нужного мне комплемента.

Я думаю, что мне нужно что-то вроде одноэлементного подхода, но я не уверен в правильности этой мысли.

Answer 1

Вам понадобится сервис, который делает запрос и сохраняет данные.Вот пример простого сервиса, который делает HTTP-запрос для некоторых данных, представляющих собой массив строк.

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

Injectable({
    providedIn: 'root'
})
export class MyExampleService {
    private myData: string[] = [];

    constructor(private readonly http: HttpClient) { }

    getData$(): Observable<string[]> {
        //if we already got the data, just return that
        if (this.myData.length > 0) {
            return of(this.myData);
        }

        //if not, get the data
        return this.http.get<string[]>('http://my-api.com/get-stuff')
            .pipe(tap((returnedData: string[]) => {
                //save the returned data so we can re-use it later without making more HTTP calls
                this.myData = returnedData;
            }));
    }
}

тогда в ваших угловых компонентах они могут запрашивать данные одинаковым образом, но толькотот, который делает это первым, на самом деле сделает HTTP-запрос, другие просто получат уже кэшированные данные.

import { Component, OnInit } from '@angular/core';
import { MyExampleService } from '../services/my-example.service';

@Component({
    selector: 'app-my-example',
    templateUrl: './my-example.component.html'
})
export class MyExampleComponent implements OnInit {
    theData: string[] = [];

    constructor(private readonly myExampleService: MyExampleService) {}

    ngOnInit(): void {
        //call the service
        this.myExampleService.getData$()
            .subscribe((data: string[]) => {
              //when sucessful, data is returned here and you can do whatever with it
              this.theData = data;
            }, (err: Error) => {
                //When unsuccessful, this will run
                console.error('Something broke!', err);
            });
    }
}