Angular路由切换时发送HTTP请求及跨组件获取请求响应方法

Hey there! Let's break down your two Angular questions step by step—these are super common scenarios I’ve helped teammates work through before:

There are a few reliable approaches depending on whether you need the request to complete before the route loads, or just trigger it as part of the navigation flow:

• Route Resolvers (Recommended for preloading data)
  Resolvers run before the route activates, ensuring your component has data ready as soon as it loads. Perfect for cases where the target component depends on the request result.

  First, create a resolver class:

  // data.resolver.ts
  import { Injectable } from '@angular/core';
  import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
  import { DataService } from './data.service';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class DataResolver implements Resolve<any> {
    constructor(private dataService: DataService) {}
  
    resolve(route: ActivatedRouteSnapshot): Observable<any> {
      // Use route params if needed (e.g., fetch data by ID)
      const itemId = route.paramMap.get('id');
      return this.dataService.fetchData(itemId);
    }
  }
  

  Then add it to your route config:

  // app-routing.module.ts
  import { DataResolver } from './data.resolver';
  
  const routes: Routes = [
    {
      path: 'target-page',
      component: TargetComponent,
      resolve: { resolvedData: DataResolver }
    }
  ];
  

  Finally, access the data in your target component:

  // target.component.ts
  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.data.subscribe(routeData => {
      const response = routeData.resolvedData;
      // Process the response here
    });
  }
  

• Router Event Listener
  If you just need to trigger a request when navigation starts (without waiting for it to finish), listen to router events like NavigationStart:

  // In a service or component
  import { Router, NavigationStart } from '@angular/router';
  import { filter } from 'rxjs/operators';
  import { DataService } from './data.service';
  
  constructor(private router: Router, private dataService: DataService) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationStart)
    ).subscribe(event => {
      // Only trigger for specific routes
      if (event.url.includes('/target-page')) {
        this.dataService.sendRequest().subscribe(response => {
          // Handle the response as needed
        });
      }
    });
  }
  

• Directly in the Target Component's ngOnInit
  If your request depends on route parameters, you can fire it directly when the component initializes:

  // target.component.ts
  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const itemId = params.get('id');
      if (itemId) {
        this.dataService.fetchData(itemId).subscribe(response => {
          // Process data
        });
      }
    });
  }
  

When you upload an image in one component and need to display the response in another, here are the most practical methods:

• Shared Service (Most Common & Flexible)
  Create a singleton service to hold the response data temporarily. This works even if the user navigates back and forth, and avoids relying on browser state.

  First, create the shared service:

  // shared-image.service.ts
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class SharedImageService {
    private imageResponse$ = new BehaviorSubject<any>(null);
    currentImageResponse$ = this.imageResponse$.asObservable();
  
    setImageResponse(data: any) {
      this.imageResponse$.next(data);
    }
  }
  

  In your upload component, save the response after the HTTP call:

  // upload.component.ts
  constructor(
    private sharedImageService: SharedImageService,
    private http: HttpClient,
    private router: Router
  ) {}
  
  uploadImage(file: File) {
    const formData = new FormData();
    formData.append('image', file);
  
    this.http.post('/api/upload', formData).subscribe(response => {
      // Save response to the shared service
      this.sharedImageService.setImageResponse(response);
      // Navigate to the display component
      this.router.navigate(['/image-display']);
    });
  }
  

  In your display component, subscribe to the service to get the data:

  // image-display.component.ts
  constructor(private sharedImageService: SharedImageService) {}
  
  ngOnInit() {
    this.sharedImageService.currentImageResponse$.subscribe(response => {
      if (response) {
        // Display the response data (e.g., image URL, metadata)
        this.imageData = response;
      }
    });
  }
  

• Router State (Temporary, No Persistence)
  You can pass data directly via the router's state option. Note that this data is stored in the browser's history, so it will be lost if the user refreshes the page.

  In the upload component:

  this.http.post('/api/upload', formData).subscribe(response => {
    this.router.navigate(['/image-display'], {
      state: { imageResponse: response }
    });
  });
  

  In the display component:

  // image-display.component.ts
  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  ngOnInit() {
    // Get state from current navigation
    const navigation = this.router.getCurrentNavigation();
    if (navigation?.extras.state) {
      this.imageData = navigation.extras.state['imageResponse'];
    }
    // Or access directly from window history
    // this.imageData = window.history.state.imageResponse;
  }
  

• LocalStorage/SessionStorage (For Persistence)
  If you need the data to survive page refreshes, store it in localStorage or sessionStorage. Just be cautious with sensitive data, as this storage is accessible client-side.

  In the upload component:

  this.http.post('/api/upload', formData).subscribe(response => {
    localStorage.setItem('imageUploadResponse', JSON.stringify(response));
    this.router.navigate(['/image-display']);
  });
  

  In the display component:

  ngOnInit() {
    const storedResponse = localStorage.getItem('imageUploadResponse');
    if (storedResponse) {
      this.imageData = JSON.parse(storedResponse);
      // Clean up after use to avoid leftover data
      localStorage.removeItem('imageUploadResponse');
    }
  }
  

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