当你在Angular应用中引入路由时，需要创建一个路由模块。路由模块负责配置应用的导航规则，并将其关联到相应的组件。下面是一个简单的Angular路由模块的示例，你可以根据你的具体需求进行调整。

首先，在项目的根目录下创建一个新的文件，命名为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: 'heroes', component: HeroListComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: '', redirectTo: '/heroes', pathMatch: 'full' },
];

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

上述代码中，我们首先引入了NgModule、RouterModule和Routes，然后定义了一个routes数组，其中包含了应用的不同路由规则。在这个例子中，我们有两个路由：一个用于显示英雄列表，另一个用于显示英雄的详细信息。还有一个默认路由，将空路径重定向到/heroes。

接下来，我们使用@NgModule装饰器来定义路由模块。通过imports数组引入RouterModule.forRoot(routes)，它会根据我们定义的路由规则进行配置。

最后，通过exports将RouterModule导出，以便在应用的其他模块中使用。

最后，别忘了在应用的主模块（通常是app.module.ts）中导入并添加AppRoutingModule到imports数组中。
// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; // 导入 AppRoutingModule

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

@NgModule({
  declarations: [
    AppComponent,
    HeroListComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // 将 AppRoutingModule 添加到 imports 数组中
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

现在，你的应用就配置好了基本的路由支持。记得在每个组件中使用路由链接时，使用routerLink属性，例如：
<!-- 在 HeroListComponent 中 -->
<a routerLink="/heroes">Heroes</a>

<!-- 在 HeroDetailComponent 中，假设有一个 hero 对象 -->
<a routerLink="/detail/{{ hero.id }}">View Details</a>

这只是一个简单的示例，你可以根据实际需求扩展和调整路由配置。


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