Angular跨无关联组件传值：是否需再次使用Observable？

Hey there! Let's break this down clearly since you're both new to Angular—great question by the way!

First off: Your teammate's Observable approach has a critical flaw #

Storing the raw HTTP Observable directly is not the right way to handle cross-component data sharing. Here's why:
HTTP Observables from Angular's HttpClient are cold Observables. That means every time a component subscribes to currentSearchResults, it will re-trigger the entire API call. If two different components subscribe to this, you'll end up with duplicate HTTP requests—totally against your requirement of only updating data when a new search happens.

Their implementation also misuses Observable: creating a new Observable instance like that isn't meant for storing static data; it's for defining new async streams.

Your variable + localStorage approach: Pros and Cons #

Your solution is straightforward, but it has tradeoffs:

• Pros:
  • Super easy to implement
  • Data persists across page refreshes (if that's a requirement for your app)
• Cons:
  • Serializing/deserializing data with JSON.stringify()/JSON.parse() adds overhead, and can lose type information for complex objects
  • Synchronous access to localStorage and the service variable can lead to consistency issues (e.g., one component reads localStorage while another has already updated the in-memory variable)
  • If you don't need to keep search results after the user closes the app, localStorage is unnecessary baggage

When should you use Observables (the right way)? #

If you want a more Angular-native, reactive approach to cross-component data sharing, you should use Subjects (specifically BehaviorSubject for your use case). This is the recommended pattern for sharing state between unrelated components, especially when:

• You want multiple components to react instantly to data updates
• You don't need persistent storage
• You want to avoid localStorage's serialization headaches

Here's what a correct Observable-based service would look like:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { IProjectResourceBasicSearch } from './your-types-file';

@Injectable({ providedIn: 'root' })
export class TransfereService {
  // BehaviorSubject holds the latest value, and new subscribers get the current value immediately
  private _currentSearchResults$ = new BehaviorSubject<IProjectResourceBasicSearch[]>([]);
  
  // Expose a read-only Observable to prevent external code from modifying the stream directly
  currentSearchResults$: Observable<IProjectResourceBasicSearch[]> = this._currentSearchResults$.asObservable();

  setSearchResults(newSearchResults: IProjectResourceBasicSearch[]) {
    // Send the new data to all subscribed components
    this._currentSearchResults$.next(newSearchResults);
  }
}

How to use this: #

1. In your search component, after fetching data from the API:

   this.searchService.searchProjectsBasic(searchParams).subscribe(results => {
     this.transfereService.setSearchResults(results);
   });
   

2. In your results view component:

   ngOnInit(): void {
     this.transfereService.currentSearchResults$.subscribe(results => {
       this.displayedResults = results;
     });
   }
   

Final Verdict: Do you need to use Observables here? #

You don't need to store the raw HTTP Observable like your teammate proposed—that's unnecessary and causes bugs. However, using a BehaviorSubject-based Observable approach is a better choice than localStorage if:

• You don't need persistent search results
• You want components to react automatically when new search data arrives
• You want to follow Angular's reactive design patterns

Your localStorage approach works, but it's less flexible for a dynamic Angular app. Your teammate's heart was in the right place with reactive patterns, but their implementation was incorrect.

内容的提问来源于stack exchange，提问作者Ricardo Sanchez Santos