Angular 在多个组件之间共享来自单个实例服务的数据（和缓存的数据）

我正在创建一个服务，该服务将从服务器中提取数据，然后将该数据加载到一个属性中以供以后使用，然后通知所有组件该服务已就绪。将数据加载到属性中的想法是，组件可以通过某些方法同步查询数据 我遇到的问题是，每个组件都会触发一个新的http调用

所以问题是，我如何只发出一个http请求，然后在数据准备就绪时通知所有组件

@Injectable({
    providedIn: 'root'
})
export class TypelistService {
    private readonly baseURL = `${environment.myEndpoint}/api/typelist`;
    private list: Type[];
    private iSeeYou: Observable<ServiceStatus>;
    constructor(private http: HttpClient) {
        console.log('Hello Constructor'); // <-- this line execute only once as expected
        this.iSeeYou = new Observable((observer) => {
            observer.next({ status: 'calling' });
            this.http.get(this.baseURL).subscribe((data: Type[]) => {
                this.list = data;
                observer.next({ status: 'ready' });
                observer.complete();
            });
        });
    }

    init(): Observable<ServiceStatus> {
        return this.iSeeYou;
    }
    getAllTypes() {
        return this.list;
    }
    getItemById(id: number): Type {
        let item: TypeError;
        this.list.forEach((i) => {
            if (i.id === id) {
                item = i;
            }
        });
        return item;
    }
    getItemByName(name: string): Type {
        let item: TypeError;
        this.list.forEach((i) => {
            if (i.name === name) {
                item = i;
            }
        });
        return item;
    }
}

---

如果您想让其他组件知道数据是否可用并准备就绪。您可以在服务中将列表声明为行为主体。这样，每当列表中有更改或更新时，每个订户都会收到通知并收到可用的最新值

例：

您可以将列表公开为其他人可以观察到的，以便其他组件不会与主题值混淆：

list = this.listData.asObservable();

现在，您可以订阅components中的列表，并在列表更改时立即获得更新。所有订阅服务器都将具有列表中的最新值

阅读更多关于

iSeeYou() {
//make service call get the data and push to list
        this.listData.next(data);
    }

list = this.listData.asObservable();