Angular Routing借鉴了此模型，以浏览应用程序中的不同页面。
它将浏览器URL解释为导航到客户端生成的视图的指令。
我们可以将路由器绑定到页面上的链接，当用户单击链接时，该页面可帮助导航到适当的应用程序视图。
当用户单击按钮或者从保管箱中选择一个选项时，我们还可以进行必要的导航。
路由器还将活动日志保存在浏览器的历史日志中，因此前进和后退按钮也起作用。

Angular路由安装

现在，让我们从快速教程开始，该教程如何将Angular Routing安装到应用程序。
首先，请确保已在系统中安装了Angular。
如果我们不熟悉Angular，请参考Angular CLI安装上的链接。
一切设置完成后，让我们构建一个新的Angular Project。

首先，我们需要在目录中创建项目。
稍后，我们需要使用Windows命令提示符上的cd命令或者我们使用的任何其他CLI将路径更改为该目录。
假设我们在桌面上有一个名为" Angular Routing"的目录，则需要执行以下命令以导航到该目录。

cd C:Users/System_Name/Desktop/Angular Routing

稍后，我们需要执行以下命令来创建新的Angular项目。

ng new angular-routing

首先，它将询问我们是否将Angular Routing添加到项目中，如下所示：

我们需要选择y，即，是，将路由添加到项目。
接下来，它将询问我们要使用哪种样式表格式，如下所示：

我们需要单击CSS在应用程序上安装默认CSS样式表，其中包括所有其他样式表。
随后，这将在目录中创建一个名为angular-routing的新项目。
我们可以使用以下命令导航到项目：

cd angular-routing

如果我们已经有一个Angular项目并想为其添加路由，则只需在命令提示符下执行以下命令。

ng generate module app-routing --flat --module=app

这将为项目添加路由，并在src/app目录中生成app-routing.module.ts文件。
生成的文件将如下所示：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
const routes: Routes = [ ];
 
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
 
export class AppRoutingModule { }

应用程序和第一个组件之间的路由

首先，我们需要使用以下命令生成名为first-component的组件：

ng g c first-component

这将在src/app目录中创建名为" first-component"的组件。
它由以下子组件组成：

• first-component.component.css

• first-component.component.html

• first-component.component.spec.ts

• first-component.component.ts

现在，假设我们要添加从app.component到第一个组件的路由。
首先，我们需要转到应用程序上的app.component.html文件，并清除所有现有代码。
接下来，我们需要编写新的代码，如下所示：

<mat-toolbar>
   Angular Routing Tutorial
</mat-toolbar>
<router-outlet></router-outlet>

其中<mat-toolbar>是来自Angular Material的容器，用于标题和标题。
如果我们不熟悉它，可以参考Angular Material上的文章以获取安装信息和演示教程。

<router-outlet>是路由器库中的路由器指令，用于将路由器定向到显示路由视图的位置。
要使用此指令，我们需要首先使用以下命令将其从Angular路由器目录导入app.module.ts文件中：

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

稍后，我们还需要在app.module.ts文件中的imports：[]部分中添加此模块。

imports: [
   BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   MatToolbarModule,
   RouterModule.forRoot(routes)
],

对于路由，我们需要添加" RouterModule.forRoot(routes)"。

现在，让我们使用以下命令为项目服务：

ng serve -o

这将在系统的默认浏览器上打开项目，如下所示：

假设，现在我们要为第一个组件创建一个根。
首先，让我们在first-component.component.html文件中编写代码以显示第一个组件页面的内容。

<h3>Welcome to the First Component!</h3>

接下来，让我们进入app.module.ts文件，并在Routes = []部分中为第一个组件创建路径。

const routes: Routes = [
   { path: 'first-component', component: FirstComponentComponent }
];

这将为第一个组件创建一个路由，我们可以在浏览器中使用以下URL查看该组件：

http://localhost:4200/first-component

这将显示第一个组件文件的内容，如下所示：

组件到组件的路由

假设我们要在组件之间导航。
首先，我们需要在应用程序中生成另一个组件。
稍后，我们需要将first-component.component.html文件上的路由器链接添加到second-component.component.html文件中，如下所示：

<h3>Welcome to the First Component!</h3>
<p>Click the link below to navigate into second component</p>
<nav>
   <a routerLink = "/second-component">Second Component</a>
</nav>

接下来，我们需要按照相同的步骤为第二个组件创建路由，就像在app.module.ts文件中为第一个组件创建路由一样。
创建第二部分路径后，我们可以在浏览器中查看它。

我们需要单击"第二个组件"链接以导航到第二个组件页面并显示其内容。

通过按钮路由

假设我们要浏览按钮。
首先，让我们在应用程序中添加一个"菜单"选项和一个"主页"图标。
我们需要打开app.component.html文件并按如下所示编辑代码：

<mat-toolbar>
   Angular Routing Tutorial
   <span class="homespace">
   <button class="example" mat-icon-button routerLink="/">
      <mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
   </button> 
   <span class="space">
   <button class="btns" mat-button [matMenuTriggerFor]="menu">Menu</button>
   <mat-menu #menu="matMenu">
      <button mat-menu-item routerLink="/settings">Settings</button>
      <button mat-menu-item routerLink="/help">Help</button>
   </mat-menu>
</mat-toolbar>
<router-outlet></router-outlet>

其中<mat-icon>是来自Angular Material的容器，用于表示各种图标。
要使用此功能，我们需要从app.module.ts文件中的" @ angular/material"目录中导入MatIconModule，就像MatToolbarModule一样。

我们甚至需要生成两个组件，例如：设置和帮助组件。
现在，我们需要按照与上述相同的步骤为这些组件创建路由。
在上面HTML代码中，routerLink =" /"指向第一页URL的路径，例如：http：//localhost：4200。

接下来，我们需要在app.component.css文件中编写以下代码。

.space{
    flex: 1 1 auto;
}
.homespace{
    flex: 20 0 auto;
}
.btns{
    width: 100px;
    height: 40px;
    font-size: large;
    border-radius: 10px;
    border: 3px solid #113c89;
    background-color: rgb(252, 173, 173);
    cursor: pointer;
}
.example {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

创建设置和帮助组件的路径后，我们可以通过为项目提供服务在浏览器中查看它。

现在，我们只需单击"设置"或者"帮助"选项即可浏览这些页面。
将介绍"设置"选项的示例。

如上图所示，我只单击了"设置"选项，然后将其重定向到" /设置"页面。

要返回首页，我们只需单击"主页"图标，它会将我们重定向到首页，如下所示。

特殊字符串路径

还有一个特殊的字符串" **"可以添加到路径中。
如果请求的URL与我们定义的路径或者路由都不匹配，则该字符串用于重定向到我们定义的路径。
该字符串可以添加到位于app.module.ts文件中的Routes = []部分中。

const routes: Routes = [ 
   { path: 'first-component', component: FirstComponentComponent },
   { path: 'second-component', component: SecondComponentComponent },
   { path: 'settings', component: SettingsComponent },
   { path: 'help', component: HelpComponent },
   { path: '**', redirectTo: '', pathMatch: 'full' }
];

例如，我们可以在应用程序中看到定义的路径。
在浏览器URL部分中，我们需要输入以下地址：

http://localhost:4200/third-component

由于第三个组件不存在，它将重定向到第一页URL，例如：http：//localhost：4200并显示其内容。