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

Angular 应用程序是模块化的，而 NgModules 是 Angular 自己的模块化架构。 NgModules 是紧密集成的应用程序域、工作流或包含内聚代码块的功能集的容器。它们的范围由它们包含的 NgModule 管理，它们可以包含组件、服务提供者和其他代码文件。您可以从其他 NgModule 导入函数或导出它们的子集以供其他 NgModule 使用。

Angular 中的路由允许用户创建具有多个视图的单页应用程序，并允许在它们之间导航。用户可以在这些视图之间切换而不会丢失应用程序状态和属性。在本文中，我们将讨论如何在 Angular 9 中创建带有路由的模块。我们将通过一个非常简单的示例逐步说明如何在 Angular 9 应用程序中创建路由模块，以便您轻松理解这个怎么运作。

我们将应用上述方法逐步构建路由模块。

• 创建一个新的 Angular 应用程序：使用以下命令，我们可以快速创建一个 Angular 应用程序：

  ng new geeksforgeeks-solution

• 创建主模块：进入我们的项目文件夹。在我们正确创建应用程序后，我们想使用 Angular CLI 命令创建一个模块。在 Angular 应用程序中，Angular 给出了一个命令来构建一个带有路由的模块。因此，要创建主模块，请运行以下命令：

  ng g module main --routing

  成功运行上述命令后，它将在app文件夹内的新文件夹名称中创建两个文件作为main 。

  

• 将模块导入到 module.ts 文件：我们只是将模块导入到app.module.ts文件中，因此更新此文件，如下所示：

方法：

• 创建一个要使用的 Angular 应用程序。
• 在应用程序组件内创建导航链接，然后为每个路由提供“routerLink”指令，并将路由值传递给“routerLink”指令。
• 然后将路由添加到 routing.module.ts 文件中，然后将 routing.module.ts 导入到 app.module.ts 文件中。

项目结构：它将如下图所示：

例子：

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
  
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MainModule } from "./main/main.module";
  
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, MainModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

为主模块创建组件：我们现在使用以下命令向我们的主模块添加一个新组件，所以让我们创建主模块的主页、关于我们和联系我们的组件：

ng g component main/home
ng g component main/aboutus
ng g component main/contactus

成功运行上述命令后：

为组件添加路由：在这一步中，我们只是将路由添加到我们创建的组件中，因此我们需要更新我们的主模块路由模块文件，如下所示：

主路由.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AboutUsComponent } from "./about-us/about-us.component";
import { ContactUsComponent } from "./contact-us/contact-us.component";
import { HomeComponent } from "./home/home.component";
  
const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "aboutus", component: AboutUsComponent },
  { path: "contactus", component: ContactUsComponent },
];
  
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MainRoutingModule {}

更新组件 HTML 文件：最后，我们需要更新我们的应用组件的 HTML 文件，我们需要添加所有路由与路由器出口的绑定，所以我们更新它们如下所示：

app.component.html

  
    
  
  
    

      
Home
      
Contact
      
About
    
  
    

      
    
  

现在，我们可以使用以下命令运行我们的示例应用程序：

ng serve

输出：

最终应用程序输出