• 把 /heroes 修改为 /superheros

先取得 Hero 路由，并把它们迁移到新的 URL。Router（路由器）会在开始导航之前先在配置中检查所有重定向语句，以便将来按需触发重定向。要支持这种修改，你就要在 heroes-routing.module 文件中把老的路由重定向到新的路由。

// hero-routing.module.ts
import { NgModule }             from ''@angular/core'';
import { RouterModule, Routes } from ''@angular/router'';

import { HeroListComponent }    from ''./hero-list/hero-list.component'';
import { HeroDetailComponent }  from ''./hero-detail/hero-detail.component'';

const heroesRoutes: Routes = [
  { path: ''heroes'', redirectTo: ''/superheroes'' },
  { path: ''hero/:id'', redirectTo: ''/superhero/:id'' },
  { path: ''superheroes'',  component: HeroListComponent, data: { animation: ''heroes'' } }, 
  { path: ''superhero/:id'', component: HeroDetailComponent, data: { animation: ''hero'' } }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroesRoutingModule { }

•  app-routing.module.ts 中修改空路径路由，让它重定向到 /superheroes。

  import { NgModule } from ''@angular/core'';
  import { RouterModule, Routes, PreloadAllModules } from ''@angular/router'';
  
  import { ComposeMessageComponent } from ''./compose-message/compose-message.component'';
  import { PageNotFoundComponent } from ''./page-not-found/page-not-found.component'';
  
  import { AuthGuard } from ''./auth/auth.guard'';
  import { SelectivepreloadingStrategyService } from ''./selective-preloading-strategy.service'';
  
  const appRoutes: Routes = [
    {
      path: ''compose'',
      component: ComposeMessageComponent,
      outlet: ''popup''
    },
    {
      path: ''admin'',
      loadChildren: () => import(''./admin/admin.module'').then(mod => mod.AdminModule),
      canLoad: [AuthGuard]
    },
    {
      path: ''crisis-center'',
      loadChildren: () => import(''./crisis-center/crisis-center.module'').then(mod => mod.CrisisCenterModule),
      data: { preload: true }
    },
    { path: '''', redirectTo: ''/superheroes'', pathMatch: ''full'' },
    { path: ''**'', component: PageNotFoundComponent }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
        {
          enableTracing: false,
          preloadingStrategy: SelectivepreloadingStrategyService,
        }
      )
    ],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }

   

• 由于 RouterLink 指令没有关联到路由配置，所以你需要修改相关的路由链接，以便在新的路由激活时，它们也能保持激活状态。你要修改 app.component.ts 模板中的 /heroes 路由链接。

  <h1>Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
    <a routerLink="/admin" routerLinkActive="active">Admin</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>
    <a [routerLink]="[{ outlets: { popup: [''compose''] } }]">Contact</a>
  </nav>
  <div [@routeAnimation]="getAnimationData(routerOutlet)">
    <router-outlet #routerOutlet="outlet"></router-outlet>
  </div>
  <router-outlet name="popup"></router-outlet>

   

• 修改 hero-detail.component.ts 中的 goToHeroes() 方法，使用可选的路由参数导航回 /superheroes。

  gotoHeroes(hero: Hero) {
    let heroId = hero ? hero.id : null;
    this.router.navigate([''/superheroes'', { id: heroId, foo: ''foo'' }]);
  }