面试题：Angular模块化开发中如何配置路由模块

Question

在Angular模块化开发实践场景下，假设你有一个包含多个组件的项目，现在要实现组件间的路由跳转功能，请详细说明如何配置路由模块，包括创建路由文件、定义路由数组以及在模块中引入路由模块的步骤。

Answer 1

1. 创建路由文件：
   • 在项目的合适目录下，通常是 src/app 目录，创建一个新的文件，比如 app - routing.module.ts。
   • 在这个文件中，首先导入必要的模块：

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   

2. 定义路由数组：
   • 在 app - routing.module.ts 文件中，定义一个 Routes 类型的数组。每个路由对象包含 path（路径）和 component（对应的组件）属性。例如：

   const routes: Routes = [
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent },
     { path: 'contact', component: ContactComponent }
   ];
   

   • 可以添加更多复杂的配置，比如子路由、路由参数等。例如，带有路由参数的路由：

   { path: 'user/:id', component: UserComponent }
   

3. 在模块中引入路由模块：
   • 在 app - routing.module.ts 文件的 @NgModule 装饰器中，配置 RouterModule.forRoot(routes) 来注册路由。完整代码如下：

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

   • 然后在 app.module.ts 文件中导入 AppRoutingModule：

   import { AppRoutingModule } from './app - routing.module';
   @NgModule({
     imports: [
       // 其他模块
       AppRoutingModule
     ],
     // 其他配置
   })
   export class AppModule { }
   

   • 这样，在组件模板中就可以使用 <router - outlet> 标签来显示匹配路由的组件，并且可以通过 <a [routerLink]="['/home']">Home</a> 这样的链接来实现路由跳转。