Angular 4按钮点击开新标签页设Session后页面崩溃问题求助

Let's break down what's causing this frustrating freeze/crash and fix it step by step:

What's Going Wrong? #

The core issue here is a common misunderstanding of sessionStorage behavior—it's isolated to each browser tab/window. When you set sessionStorage in your current tab, the new tab you open won't have access to that value. This means your edit page is probably failing to fetch destination data (since it can't retrieve destination_id), which might trigger unhandled errors or infinite retries that take down both tabs. Additionally, manually building the URL with window.location.origin isn't the most reliable way to handle Angular routing.

Step-by-Step Solution #

1. Update Your Route Configuration
   First, modify your Angular route to accept destination_id as a URL parameter. This lets you pass the ID directly to the edit page without relying on sessionStorage:

   // In your routing module (e.g., app-routing.module.ts)
   const routes: Routes = [
     // ...other existing routes
     { path: 'destination/editdestination/:id', component: EditDestinationComponent }
   ];
   

2. Rewrite the Click Handler
   Replace your current method with this version. We'll use Angular's Router to generate a valid route URL, skip the unnecessary event.preventDefault() (your button is type="button", so it doesn't trigger form submissions by default), and pass the ID via the URL:

   import { Router } from '@angular/router';
   
   // Don't forget to inject Router in your component constructor
   constructor(private router: Router, private destinationService: DestinationService) {}
   
   goToEditDestinationByDestinationId(event, destination_id) {
     // Generate the proper Angular route URL with the destination ID
     const editRoutePath = this.router.createUrlTree(['/destination/editdestination', destination_id]).toString();
     const fullEditUrl = `${window.location.origin}${editRoutePath}`;
   
     // Open the edit page in a new tab
     window.open(fullEditUrl, '_blank');
   
     // Keep this line only if you need the ID stored in your service for the current tab
     this.destinationService.setDestinationId(destination_id);
   }
   

3. Retrieve the ID in the Edit Component
   In your EditDestinationComponent, fetch the ID from the route parameters instead of sessionStorage:

   import { ActivatedRoute } from '@angular/router';
   
   constructor(private route: ActivatedRoute, private destinationService: DestinationService) {}
   
   ngOnInit(): void {
     const destinationId = this.route.snapshot.paramMap.get('id');
     if (destinationId) {
       // Store the ID in your service and fetch the corresponding data
       this.destinationService.setDestinationId(destinationId);
       this.destinationService.getDestinationData(destinationId).subscribe(
         (data) => {
           // Handle your destination data here
         },
         (error) => {
           // Add error handling to prevent unexpected crashes
           console.error('Failed to load destination data:', error);
         }
       );
     }
   }
   

Bonus Best Practices #

• Always add error handling to your HTTP requests (like the subscribe error callback above) to catch issues before they crash your app.
• Avoid using sessionStorage for cross-tab state sharing—use URL parameters, query parameters, or a state management tool (like NgRx) if you need to pass data between tabs.

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