为 "英雄之旅"（Tour of Heroes）应用程序添加路由支持的第一个里程碑是建立应用的基本结构并设置初始路由。以下是详细的步骤：

步骤 1: 创建新的 Angular 项目

使用 Angular CLI 创建一个新的 Angular 项目：
ng new tour-of-heroes
cd tour-of-heroes

步骤 2: 安装 Angular 路由模块

安装 Angular 的路由模块：
ng add @angular/router

步骤 3: 创建英雄组件

使用 Angular CLI 创建两个简单的组件，分别表示英雄列表和英雄详情：
ng generate component hero-list
ng generate component hero-detail

步骤 4: 配置路由

打开 src/app/app-routing.module.ts 文件，配置基本的路由：
// app-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 routes: Routes = [
  { path: '', redirectTo: '/heroes', pathMatch: 'full' },
  { path: 'heroes', component: HeroListComponent },
  { path: 'heroes/:id', component: HeroDetailComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

这里定义了三个路由：
  •  空路径重定向到 /heroes

  •  /heroes 显示 HeroListComponent

  •  /heroes/:id 显示 HeroDetailComponent，其中 :id 是动态参数，表示英雄的 ID


步骤 5: 在模板中使用路由链接

打开 src/app/app.component.html 文件，并在模板中使用 routerLink 指令创建导航链接：
<!-- app.component.html -->

<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

<router-outlet></router-outlet>

这里创建了一个导航链接，指向 /heroes 路由，以及一个 <router-outlet> 用于显示当前路由对应的组件。

步骤 6: 在模板中显示视图

打开 src/app/hero-list/hero-list.component.html 文件和 src/app/hero-detail/hero-detail.component.html 文件，并分别添加一些基本的内容，以便在视图中显示一些信息。
<!-- hero-list.component.html -->

<div>
  <h2>Hero List</h2>
  <p>This is the hero list component.</p>
</div>
<!-- hero-detail.component.html -->

<div>
  <h2>Hero Detail</h2>
  <p>This is the hero detail component.</p>
</div>

步骤 7: 启动应用

最后，运行你的应用：
ng serve

访问 http://localhost:4200，你应该能够看到应用并通过导航链接在不同的视图之间切换，查看英雄列表和英雄详情。

这个里程碑建立了 "英雄之旅" 应用的基本结构，并设置了初始的路由。在接下来的里程碑中，你可以根据实际需求扩展和修改路由配置，以构建更复杂的导航结构和功能。


转载请注明出处：http://www.pingtaimeng.com/article/detail/4941/Angular