页面刷新致组件间传值丢失的解决办法及导航组件传数据咨询

Hey there! Let's tackle your two main requirements—passing data via the full-screen overlay navigator, and fixing the data loss issue on page refresh—tailored to your app structure.

1. Passing Data from the Full-Screen Overlay Navigator Component #

Based on your setup (navigating to Feature Module y from the master-page's overlay navigator), here are the most practical Angular-native approaches:

Option 1: Route Parameters (For Route-Based Navigation) #

If your navigation triggers a route change to Feature Module y, you can attach data directly to the route:

Step 1: Update Route Configuration

In your root routing module (or the feature module's routing), define route parameters or data property:

// app-routing.module.ts
const routes: Routes = [
  // ... other routes
  {
    path: 'feature-y',
    loadChildren: () => import('./feature-y/feature-y.module').then(m => m.FeatureYModule),
    // Optional: Static data (if you don't need dynamic values)
    data: { moduleName: 'Feature Y' }
  }
];

Step 2: Navigate with Dynamic Parameters from the Navigator

In your overlay navigator component, use Router to navigate with query parameters or route params:

// full-screen-overlay-nav.component.ts
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToFeatureY(data: any) {
  // Use query params for optional/dynamic data
  this.router.navigate(['/feature-y'], {
    queryParams: { itemId: data.id, category: data.category }
  });

  // OR use route params (if defined in the route path, e.g., 'feature-y/:itemId')
  // this.router.navigate(['/feature-y', data.id]);
}

Step 3: Fetch Data in Feature Y's Component

Use ActivatedRoute to retrieve the data:

// feature-y-main.component.ts
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

private routeSub!: Subscription;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // Get query params
  this.routeSub = this.route.queryParams.subscribe(params => {
    const itemId = params['itemId'];
    const category = params['category'];
    // Use the data here
  });

  // Get static route data
  const staticModuleName = this.route.snapshot.data['moduleName'];
}

ngOnDestroy() {
  this.routeSub.unsubscribe();
}

Option 2: Shared Service (For Non-Route or Complex Data) #

If you need to pass complex objects or don't want to expose data in the URL, use a shared service with reactive streams:

Step 1: Create a Shared Navigation Service

Provide this service at the root level (so it's available across all modules):

// navigation-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NavigationDataService {
  private navigationDataSubject = new BehaviorSubject<any>(null);
  public navigationData$: Observable<any> = this.navigationDataSubject.asObservable();

  setNavigationData(data: any) {
    this.navigationDataSubject.next(data);
  }
}

Step 2: Send Data from the Navigator Component

// full-screen-overlay-nav.component.ts
import { NavigationDataService } from '../services/navigation-data.service';
import { Router } from '@angular/router';

constructor(
  private navDataService: NavigationDataService,
  private router: Router
) {}

navigateToFeatureY(data: any) {
  // Set data first, then navigate
  this.navDataService.setNavigationData(data);
  this.router.navigate(['/feature-y']);
}

Step 3: Receive Data in Feature Y's Component

// feature-y-main.component.ts
import { NavigationDataService } from '../../services/navigation-data.service';
import { Subscription } from 'rxjs';

private dataSub!: Subscription;

constructor(private navDataService: NavigationDataService) {}

ngOnInit() {
  this.dataSub = this.navDataService.navigationData$.subscribe(data => {
    if (data) {
      // Use the passed data
    }
  });
}

ngOnDestroy() {
  this.dataSub.unsubscribe();
}

2. Fixing Data Loss on Page Refresh #

The above methods work until a page refresh—since Angular components/services get reinitialized, in-memory data is lost. Here are your best alternatives:

Option 1: Persist Data to localStorage/SessionStorage #

Modify your shared service to save data to browser storage, so it survives refreshes:

// navigation-data.service.ts
@Injectable({ providedIn: 'root' })
export class NavigationDataService {
  private navigationDataSubject = new BehaviorSubject<any>(null);
  public navigationData$: Observable<any> = this.navigationDataSubject.asObservable();
  private STORAGE_KEY = 'navigation_data';

  constructor() {
    // Load data from localStorage on service initialization
    const savedData = localStorage.getItem(this.STORAGE_KEY);
    if (savedData) {
      this.navigationDataSubject.next(JSON.parse(savedData));
    }
  }

  setNavigationData(data: any) {
    this.navigationDataSubject.next(data);
    // Save to localStorage
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(data));
  }

  // Optional: Clear data when no longer needed
  clearNavigationData() {
    this.navigationDataSubject.next(null);
    localStorage.removeItem(this.STORAGE_KEY);
  }
}

Note: localStorage persists across browser sessions, while sessionStorage only lasts until the tab is closed. Choose based on your needs.

Option 2: Use Route Parameters + Backend Fetch #

If the data you're passing is a reference (like an ID), use route params to pass the ID, then fetch the full data from your backend API on component initialization—even after a refresh:

// feature-y-main.component.ts
ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const itemId = params['itemId'];
    if (itemId) {
      // Call your API to get the full data
      this.yourApiService.getItemById(itemId).subscribe(item => {
        // Use the fetched item data
      });
    }
  });
}

This is the most reliable approach for critical data, as it doesn't depend on browser storage.

Option 3: State Management Libraries (For Complex Apps) #

If your app has complex state across multiple modules, use Angular state management tools like NgRx or Akita. These libraries support state persistence via localStorage/sessionStorage, so you can restore the state automatically after a refresh.

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