Angular2组件间无法传递数据，后端接口被调用两次问题

Alright, let's tackle your Angular issue head-on—you've got two main headaches here: duplicate API calls (one empty, one with the right params) and the fact that the valid data from the good call isn't making it to your target component. Let's break down why this is happening and fix it step by step.

Fixing the Duplicate API Calls #

The most likely culprit here is how you're handling URL query parameters in ngOnInit. If you're mixing ActivatedRoute.snapshot.queryParams (which grabs the initial param state) with a subscription to queryParams, you'll end up triggering two requests. Or maybe you're accidentally firing the request before params are fully loaded, leading to an empty call first, then a correct one once params are ready.

Here's a clean way to avoid this: use switchMap to tie your query param changes directly to your API request. This ensures you only make a request when params are available, and it automatically cancels any pending requests if params change again.

import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { switchMap, EMPTY } from 'rxjs/operators';
import { DataSharingService } from './data-sharing.service'; // We'll create this next

constructor(
  private route: ActivatedRoute,
  private http: HttpClient,
  private dataService: DataSharingService
) {}

ngOnInit(): void {
  this.route.queryParams.pipe(
    switchMap(params => {
      // Skip if there are no query params to avoid empty requests
      if (Object.keys(params).length === 0) {
        return EMPTY;
      }
      // Build your API URL with the query params
      const paramString = Object.entries(params)
        .map(([key, value]) => `${key}=${value}`)
        .join('&');
      const apiUrl = `http://localhost:8080/myapp/?${paramString}`; // Added ? before params for standard URL structure
      // Return the HTTP request observable
      return this.http.get(apiUrl);
    })
  ).subscribe({
    next: (data) => {
      console.log('Successfully fetched data:', data);
      // Pass the data to our shared service right away
      this.dataService.setData(data);
    },
    error: (err) => {
      console.error('API request failed:', err);
    }
  });
}

Quick note: I adjusted the API URL to include a ? before the params—your original example had params directly after myapp/, which is non-standard for REST APIs. Tweak this to match your backend's actual endpoint structure if needed.

Another check: make sure you're not calling your request method directly in the component template (like {{ fetchData() }}). Angular runs change detection frequently, so this will trigger the method repeatedly, leading to duplicate calls. Keep all request logic in ngOnInit or subscriptions.

Getting Data to Your Target Component #

The valid data isn't reaching your target component probably because you're using a one-time pass (like route params or @Input) that doesn't account for the async nature of the API call. The best fix here is a shared service with a BehaviorSubject—this lets components subscribe to data updates and always get the latest value, even if they load after the API call finishes.

Step 1: Create the Shared Service #

This service will hold the data and let components subscribe to changes:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  // BehaviorSubject stores the latest value and emits it to new subscribers
  private videoDataSubject = new BehaviorSubject<any>(null);
  // Expose an observable so components can't modify the subject directly
  public videoData$: Observable<any> = this.videoDataSubject.asObservable();

  setData(data: any): void {
    // Update the subject with the new data
    this.videoDataSubject.next(data);
  }
}

Step 2: Subscribe to the Data in Your Target Component #

In the component that needs the data, subscribe to the service's observable to get the latest value:

import { DataSharingService } from './data-sharing.service';

constructor(private dataService: DataSharingService) {}

ngOnInit(): void {
  this.dataService.videoData$.subscribe(data => {
    if (data) {
      // Do whatever you need with the data here
      this.processedData = data;
      console.log('Received data in target component:', data);
    }
  });
}

If your target component loads via routing, this still works—since BehaviorSubject holds the latest value, the component will get the data as soon as it subscribes, even if the API call finished earlier.

Final Checks #

• Ensure HttpClientModule is added to your AppModule (or relevant feature module) to avoid HTTP errors.
• If using standalone components, import HttpClientModule in your component's imports array.
• Double-check your backend endpoint's formatting to match the URL you're sending.

内容的提问来源于stack exchange，提问作者roger_that