angular+ 路由学习 （十）重定向迁移URL (复制官文)

• 把 /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 class="title">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' }]);
  }