Angular 5路由导航至当前URL时组件不刷新问题求助

Hey there! I totally get what you're dealing with here—this is a super common gotcha with Angular's router when navigating to the exact same route. Let's break down how to fix it so clicking the Home button updates that random ID without a full page refresh.

Why this happens #

Angular's router doesn't reinitialize a component if you navigate to the same route you're already on. That means hooks like ngOnInit (where you probably generate your random ID) won't fire again unless you switch routes and come back, or refresh the page.

Solution 1: Use onSameUrlNavigation + route event listening #

This approach keeps your URL clean and triggers the ID update without changing the route structure.

First, update your router configuration in app-routing.module.ts to enable reloading on same-url navigation:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload' // Enable same-route reloads
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then, modify your HomeComponent to listen for navigation end events and regenerate the ID when the home route is hit:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-home',
  template: `
    <h1>Home Page</h1>
    <p>Random ID: {{ randomId }}</p>
  `
})
export class HomeComponent implements OnInit, OnDestroy {
  randomId: string;
  private destroy$ = new Subject<void>();

  constructor(private router: Router) { }

  ngOnInit() {
    this.generateRandomId();
    // Listen for navigation events targeting the home route
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      filter((event: NavigationEnd) => event.urlAfterRedirects === '/home'),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.generateRandomId();
    });
  }

  generateRandomId() {
    // Generate a random alphanumeric ID
    this.randomId = Math.random().toString(36).substring(2, 10);
  }

  ngOnDestroy() {
    // Clean up the subscription to avoid memory leaks
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Solution 2: Add a dummy query parameter #

This is a simpler approach that tricks Angular into thinking the route has changed by adding a dynamic query parameter to the router link.

Update your navigation bar's Home link to include a timestamp query parameter:

<nav>
  <a 
    routerLink="/home" 
    [queryParams]="{ refresh: Date.now() }" 
    routerActive="active"
  >Home</a>
  <a routerLink="/list" routerActive="active">List</a>
</nav>

Then, in your HomeComponent, listen for changes to the query parameters to regenerate the ID:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-home',
  template: `
    <h1>Home Page</h1>
    <p>Random ID: {{ randomId }}</p>
  `
})
export class HomeComponent implements OnInit, OnDestroy {
  randomId: string;
  private destroy$ = new Subject<void>();

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // Regenerate ID whenever query params change
    this.route.queryParams.pipe(
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.generateRandomId();
    });
  }

  generateRandomId() {
    this.randomId = Math.random().toString(36).substring(2, 10);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Which solution to pick? #

• Solution 1 is better if you don't want extra parameters cluttering your URL. It's a bit more code but keeps the user experience clean.
• Solution 2 is quicker to implement and works if you don't mind the tiny query parameter in the URL (most users won't even notice it).

Both methods work perfectly with Angular 5.1.3, so pick whichever fits your needs!

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