Angular 4.4.6如何实现同URL导航时重载页面？

Hey there! Since you're stuck on Angular 4.4.6 and can't leverage the handy onSameUrlNavigation: 'reload' feature introduced in Angular 5, I’ve got a couple of reliable workarounds to help you achieve the same behavior—reloading your component when navigating to the exact same URL. Let’s walk through each approach step by step.

1. Manually Trigger Component Reinitialization #

This is the most straightforward approach if you just need to refresh a single component.

• First, in your component, subscribe to the router's NavigationEnd event to detect when a navigation completes to the same URL:

  import { Router, NavigationEnd } from '@angular/router';
  import { Subscription } from 'rxjs/Subscription';
  
  export class YourTargetComponent {
    private routerSubscription: Subscription;
  
    constructor(private router: Router) {}
  
    ngOnInit() {
      this.setupNavigationListener();
      this.loadComponentData(); // Your initial data load logic
    }
  
    private setupNavigationListener() {
      this.routerSubscription = this.router.events.subscribe(event => {
        // Check if the navigation ended and the URL matches the current one
        if (event instanceof NavigationEnd && event.url === this.router.url) {
          // Trigger your refresh logic here
          this.loadComponentData(); // Re-run your data fetch/initialization method
          // Alternatively, if you want to re-run the full ngOnInit logic:
          // this.ngOnInit();
        }
      });
    }
  
    private loadComponentData() {
      // Replace this with your actual data loading/state reset logic
      console.log('Refreshing component data...');
    }
  
    ngOnDestroy() {
      // Always clean up subscriptions to avoid memory leaks
      this.routerSubscription.unsubscribe();
    }
  }
  

• Pro tip: Instead of calling ngOnInit() directly, extract your initialization logic into a separate method (like loadComponentData() above) for cleaner, more maintainable code.

2. Custom Route Guard to Force Refresh #

If you want a reusable solution across multiple components, a custom route guard works great.

Step 1: Create the Guard #

import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

// Define an interface for components that support refresh
export interface RefreshableComponent {
  refresh(): void;
}

export class RefreshOnSameUrlGuard implements CanDeactivate<RefreshableComponent> {
  canDeactivate(component: RefreshableComponent): Observable<boolean> | boolean {
    // Trigger the component's refresh method before allowing navigation
    component.refresh();
    return true; // Allow the navigation to proceed
  }
}

Step 2: Register the Guard in Your Module #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RefreshOnSameUrlGuard } from './refresh-on-same-url.guard';
import { YourTargetComponent } from './your-target.component';

const routes: Routes = [
  {
    path: 'your-route-path',
    component: YourTargetComponent,
    canDeactivate: [RefreshOnSameUrlGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [RefreshOnSameUrlGuard] // Register the guard here
})
export class AppRoutingModule {}

Step 3: Implement the Refresh Method in Your Component #

import { RefreshableComponent } from './refresh-on-same-url.guard';

export class YourTargetComponent implements RefreshableComponent {
  refresh() {
    // Add your refresh logic here (reload data, reset forms, etc.)
    this.loadComponentData();
  }

  private loadComponentData() {
    // Your data loading logic
  }
}

• Note: When triggering navigation via router.navigate, make sure you don't use skipLocationChange: true—otherwise the guard won't be triggered.

3. Leverage Route Parameter Changes (If Applicable) #

If your route uses dynamic parameters (e.g., /product/:id), you can subscribe to parameter changes to refresh the component, even if the base URL stays the same:

import { ActivatedRoute } from '@angular/router';

export class YourTargetComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      // Refresh data whenever the parameter changes
      this.loadProduct(params.id);
    });
  }

  private loadProduct(productId: string) {
    // Fetch product data based on the new ID
  }
}

• This only works if the URL has changing parameters—for entirely identical URLs, stick with the first two methods.

Key Notes to Avoid Issues #

• Prevent Infinite Loops: If you're calling router.navigate inside your refresh logic, add a check to avoid triggering the same navigation repeatedly.
• Clean Up Subscriptions: Always unsubscribe from router events/parameter subscriptions in ngOnDestroy to prevent memory leaks.
• Test Edge Cases: Make sure to test scenarios like clicking the same router link multiple times, or programmatically navigating to the same URL.

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