Angular 9/8 中的路由和嵌套路由是什么？

在本文中，我们将学习 Angular 中的路由和嵌套路由概念。我们将实现在不同组件之间建立路由的概念，当用户单击链接时，它们将被导航到与所需组件对应的页面链接。让我们了解 Angular 中的路由。

路由： Angular 为过于复杂的简单场景提供了广泛的导航功能。定义导航项和相应的视图称为路由。路由 允许用户创建具有多个视图的单页应用程序，并允许在它们之间导航。用户可以在这些视图之间切换而不会丢失应用程序状态和属性。 Angular 提供了一个单独的路由模块来调整应用程序中的导航。在本文中，我们将了解如何在 Angular 应用程序中执行路由和嵌套路由。

句法：

ng new app_name

• 对于路由，您将需要组件。使用以下命令创建组件。

  句法：

  ng g c component_name

  Routing 表示导航，Nested-Routing 表示子导航或子页面导航。在这里，我们将三个主要链接名称分别命名为Home、ContactUs、AboutUs 。在about-us组件中，我们将创建另外两个子组件名称为ourCompany 和 ourEmployees 。

• 在 app.module.ts 中，从 @angular/router导入RouterModule、Routes 。

  句法：

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

• 然后在app-routing.module.ts的导入中 定义路径。

  const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'aboutus', component: AboutUsComponent },
   { path: 'contactus', component: ContactUsComponent }
  ];
  
  @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
  })

• 将 routerLink 的路径定义为 HTML 中app.component.html中的组件名称。

  Home
  Contact
  About

• 在app.component.html中为您的应用程序应用路由器插座。路由视图在 中呈现。

• 为about-us.component.html、contact-us.component.html和home.component.html 定义 HTML。
• 现在Angular Web 应用程序已准备好运行。

项目结构：我们的项目结构将如下图所示：

项目结构

让我们按照步骤为应用程序构建路由和嵌套路由。

第 1 步：创建简单的 Angular 应用程序。在这一步中，我们将使用命令行参数创建一个简单的 Angular 应用程序作为示例。我们需要在命令提示符下运行以下命令：

ng new geeksforgeeks-routing

一旦我们运行此命令，在命令提示符下，将要求创建路由模块两件事，我们需要回答yes 。

第 2 步：在这一步中，安装成功后，我们将使用给定的 HTML 代码更新我们的app.component.html 。

app.component.html

  
    
  
  
    

      
Home
      
Contact
      
About
    
  
    

      
    
  

第 3 步：在这一步中，我们将创建三个组件，分别为home 、 contact-us 、 和关于我们。为了创建这些组件，我们需要运行两个命令，如下所述：

ng g component home
ng g component contactUs
ng g component aboutUs

成功创建组件后，我们需要使用两个组件创建一个简单的路由，同时我们需要将所有这些组件导入到我们的模块文件中。

安装过程

第四步：我们需要在app.module.ts文件中导入所有需要的组件，这些组件安装成功后，

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { RouterModule, Router } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
  
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactUsComponent,
    AboutUsComponent
  ],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

第 5 步：在这一步中，我们将更新我们的路由模块文件。

应用程序路由.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.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

现在，让我们使用以下命令运行我们的 Angular 应用程序：

ng serve

第 6 步：创建嵌套路由

在我们的应用程序中，我们需要另外两个嵌套路由来供 about-us 使用。现在，我们需要为这个 about-us 组件再创建两个组件。要为 about 组件创建子组件，我们需要运行以下命令：

ng g component about-us/ourCompany
ng g component about-us/ourEmployees

安装过程

第 7 步：更新路由文件

为了添加我们新创建的组件，我们需要更新我们现有的app-routing.module.ts文件：

应用程序路由.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AboutUsComponent } from "./about-us/about-us.component";
import { OurCompanyComponent } from 
    "./about-us/our-company/our-company.component";
import { OurEmployeesComponent } from 
    "./about-us/our-employees/our-employees.component";
import { ContactUsComponent } from "./contact-us/contact-us.component";
import { HomeComponent } from "./home/home.component";
  
const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
  },
  {
    path: "aboutus",
    children: [
      {
        path: "",
        component: AboutUsComponent,
      },
      {
        path: "our_employees",
        component: OurEmployeesComponent,
      },
      {
        path: "our_company",
        component: OurCompanyComponent,
      },
    ],
  },
  {
    path: "contactus",
    component: ContactUsComponent,
  },
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

第 8 步：现在，我们需要在 about-us 组件中创建两个按钮。所以，我们需要更新文件：

about-us.component.html

about-us works!
  
Our Employees


Our Company

我们的公司.component.html

our-company works!
  
Back

我们的员工.component.html

our-employees works!
  
Back

现在，我们需要使用以下命令运行这个 Angular 应用程序：

ng serve

输出：