Angular 5路由问题：URL变更但未实现页面导航

Hey Marco, let's troubleshoot why your Angular navigation is updating the URL but not rendering the target component—this is a super common gotcha with nested modules and routing setup. Let's break down the most likely fixes step by step:

First, let's make sure your module routing is set up correctly, especially since you're using multiple feature modules:

• AppModule (Root Routing): Since your root routes are empty, you should be lazy-loading your feature modules here. Your AppRoutingModule should look like this:

  const routes: Routes = [
    { 
      path: '', 
      loadChildren: () => import('./home/home.module').then(m => m.HomeModule) 
    },
    { 
      path: 'player-results', 
      loadChildren: () => import('./player-result/player-result.module').then(m => m.PlayerResultModule) 
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  

• HomeModule Routing: Ensure it uses forChild (not forRoot) and maps the empty path to your search component:

  const routes: Routes = [
    { path: '', component: HomeSearchComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class HomeRoutingModule {}
  

• PlayerResultModule Routing: Define your result/detail routes here (again with forChild):

  const routes: Routes = [
    { path: '', component: PlayerResultComponent },
    { path: ':playerId', component: PlayerDetailComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class PlayerResultRoutingModule {}
  

This is the most frequent culprit:

• Make sure your root AppComponent template includes the top-level <router-outlet></router-outlet>—all feature modules will render here when navigating to their paths.
• If your modal is inside a nested component with its own <router-outlet>, navigation might be targeting that child outlet instead of the root one. To fix this, explicitly target the root outlet when navigating:

  this.router.navigate(['/player-results', playerId], { relativeTo: this.route.root });
  

Stop using relative paths—they often fail when navigating across feature modules from a nested component:

• In TypeScript: Use absolute paths starting with /:

  // Correct: Forces navigation from the root
  this.router.navigate(['/player-results', player.id]);
  
  // Wrong: Relative path may not trigger root router-outlet update
  // this.router.navigate(['player-results', player.id]);
  

• In Template (routerLink): Same rule applies—use absolute paths:

  <!-- Correct -->
  <div class="modal-list-item" [routerLink]="['/player-results', player.id]">
    {{ player.name }}
  </div>
  
  <!-- Wrong -->
  <!-- <div class="modal-list-item" [routerLink]="['player-results', player.id]"> -->
  

If you've added CanActivate/CanLoad guards to your PlayerResultModule, double-check that they're not blocking navigation:

• Ensure guards return true (or a resolved promise/observable that emits true) for valid routes.
• Add console logs in your guard logic to confirm it's not silently failing.

If your modal uses detached change detection (e.g., ChangeDetectorRef.detach()), the router might update the URL but not trigger a view refresh. Fix this by manually triggering detection after navigation:

import { ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';

constructor(private router: Router, private cdr: ChangeDetectorRef) {}

onPlayerSelect(playerId: string) {
  this.router.navigate(['/player-results', playerId]).then(() => {
    this.cdr.detectChanges();
  });
}

Start with steps 2 and 3—those are the most likely fixes for your scenario. Let me know if you hit any snags!

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