在 Angular 9 中使用路由创建模块

在 Angular 9 中，使用路由创建模块是非常常见的场景。路由可以帮助我们将不同的组件和页面组织在一起，在应用程序中创建导航结构，为用户提供更好的用户体验。在本文中，我们将介绍如何在 Angular 9 中使用路由创建模块，并提供示例代码。

创建路由模块

我们可以通过使用 ng generate module 命令来创建一个新的路由模块。这个命令将生成一个新的模块，并在其中初始化路由配置。示例代码如下：

ng generate module my-routing --flat --module=my.module.ts

这个命令会生成一个名为 my-routing 的新模块，并把它加入到 my.module.ts 模块中。--flat 标志告诉 Angular CLI 在 src/app 目录中创建该模块。如果你想把这个模块放到一个子文件夹中，你可以使用 --routing=my-subfolder/my-routing.module.ts 路径来指定。

这个命令还会在 my-routing.module.ts 文件中初始化路由器配置，使我们可以定义路由。示例代码如下：

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

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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

在这个示例中，我们定义了两个不同的路由：'' 和 about。这些路由与 HomeComponent 和 AboutComponent 等组件相关联。

使用路由模块

一旦你创建了你的路由模块，你可以在应用中使用它。在主模块中，只需要导入我们创建的路由模块即可。例如，我们可以在 app.module.ts 文件中添加如下代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyRoutingModule } from './my-routing.module';

@NgModule({
  imports: [BrowserModule, MyRoutingModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

在这个示例中，我们导入了 MyRoutingModule，并将它添加到 imports 数组中。这使得我们的应用程序能够使用在该模块中定义的路由。

完整示例代码

ng generate module my-routing --flat --module=my.module.ts

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

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyRoutingModule } from './my-routing.module';

@NgModule({
  imports: [BrowserModule, MyRoutingModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

总结

路由在 Angular 9 中是非常重要的功能。我们可以通过使用路由来创建不同的模块和组件，并将它们组织在一起以提供更好的用户体验。在本文中，我们介绍了如何在 Angular 9 中使用路由创建模块，并提供了相应的示例代码。