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

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

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

语法:

ng new app_name

对于路由，你将需要组件。使用下面的命令来创建组件。

语法:

ng g c component_name

路由是指导航，而嵌套式路由是指子导航或子页面导航。在这里，我们将创建三个主要的链接，名称为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]
    })

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

     <a class="active" href="#home" routerLink="/">Home</a>
    <a href="#contact" routerLink="/contactus">Contact</a>
    <a href="#about" routerLink="/aboutus">About</a>

在app.component.html中为你的应用程序应用router-outlet。被路由的视图在<router-outlet>.NET中呈现。

<router-outlet></router-outlet>

定义about-us.component.html, contact-us.component.html和home.component.html的HTML。
现在angular web应用程序已经准备好运行了。

项目结构：我们的项目结构将看起来像以下图片。

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

Project Structure

让我们按照步骤来建立应用程序的路由和嵌套路由。

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

ng new geeksforgeeks-routing

一旦我们运行这个命令，在命令提示符下，会有两件事要求我们创建一个路由模块，我们需要回答是。

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }
  
      li {
        float: left;
      }
  
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
  
      li a:hover {
        background-color: #04aa6d;
      }
  
      .active {
        background-color: #333;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a class="active" href="#home" routerLink="/">Home</a></li>
      <li><a href="#contact" routerLink="/contactus">Contact</a></li>
      <li><a href="#about" routerLink="/aboutus">About</a></li>
    </ul>
  
    <div style="text-align: center; font-weight: bolder; font-size: 50px">
      <router-outlet></router-outlet>
    </div>
  </body>
</html>

第3步：在这一步，我们将创建三个组件：首页，联系我们和关于我们。为了创建这些组件，我们需要运行两个命令，如下所述。

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

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

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

Installation Process

第4步：我们需要在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步：在这一步，我们要更新我们的路由模块文件。

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

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

Installation Process

第7步：更新路由文件

为了添加我们新创建的组件，我们需要更新我们现有的app-routing.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步：现在，我们需要在关于我们的组件中创建两个按钮。所以，我们需要更新文件。

<p>about-us works!</p>
  
<a class="btn btn-primary" routerLink="/aboutus/our_employees">Our Employees</a>
<br>
<a class="btn btn-primary" routerLink="/aboutus/our_company">Our Company</a>

<p>our-company works!</p>
  
<a class="btn btn-primary" routerLink="/aboutus">Back</a>

<p>our-employees works!</p>
  
<a class="btn btn-primary" routerLink="/aboutus">Back</a>

现在，我们需要使用下面的命令来运行这个angular应用程序。

ng serve

输出:

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

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

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

AngularJS 精品教程

回顶部

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

AngularJS 精品教程

回顶部

切换注册登录

用户名或邮箱

密码

切换登录注册

昵称

邮箱