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

Question

请阐述在Angular项目里，如何在模块中正确配置路由模块，包括导入必要的模块、定义路由数组以及在模块的`@NgModule`装饰器中进行相关配置，并给出一个简单示例。

Answer 1

1. 导入必要的模块：
   • 在Angular项目中，要配置路由模块，需要导入RouterModule。通常在一个模块文件（比如app.module.ts）中，先从@angular/router导入RouterModule。示例如下：

   import { RouterModule } from '@angular/router';
   

2. 定义路由数组：
   • 路由数组是一个包含路由配置对象的数组。每个路由配置对象通常包含path（路径）和component（对应的组件）等属性。例如，假设我们有HomeComponent和AboutComponent两个组件，定义路由数组如下：

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

   • 这里的Routes类型也需要从@angular/router导入。完整导入如下：

   import { Routes } from '@angular/router';
   

3. 在模块的@NgModule装饰器中进行相关配置：
   • 在模块的@NgModule装饰器的imports数组中，使用RouterModule.forRoot(routes)（如果是根模块）或RouterModule.forChild(routes)（如果是子模块）来配置路由。对于根模块app.module.ts的示例如下：

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

   • 这里的exports数组导出RouterModule，以便其他组件可以使用路由相关的指令（如router - outlet，routerLink等）。

完整示例

假设项目结构如下：

src/
├── app/
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── home/
│   │   ├── home.component.ts
│   ├── about/
│   │   ├── about.component.ts

1. home.component.ts

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app - home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css']
   })
   export class HomeComponent {}
   

2. about.component.ts

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app - about',
     templateUrl: './about.component.html',
     styleUrls: ['./about.component.css']
   })
   export class AboutComponent {}
   

3. app.module.ts

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform - browser';
   import { RouterModule, Routes } from '@angular/router';
   
   import { AppComponent } from './app.component';
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component';
   
   const routes: Routes = [
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent }
   ];
   
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       AboutComponent
     ],
     imports: [
       BrowserModule,
       RouterModule.forRoot(routes)
     ],
     exports: [RouterModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

4. app.component.html

   <a routerLink="home">Home</a>
   <a routerLink="about">About</a>
   <router - outlet></router - outlet>
   

这样就完成了在Angular模块中正确配置路由模块。