介绍
Angular 是单页应用程序(SPA)，这意味着它只有一个路径。例如，如果您在 localhost 上使用默认端口运行应用程序，则该路径为https://localhost:4200。
但在实际应用中，你希望在某些事件之后或在导航中向用户显示多个页面。那么我们如何在 Angular 中实现这些呢？
这就是 Angular 路由器发挥作用的地方。
Angular Router 简介
Angular 路由器使用户能够在某些事件之后在不同的组件之间导航。它在单页应用程序中创建了多页应用程序的体验。
让我们看看如何在 Angular 中配置路由。
使用 cmd 创建 Angular 项目
在深入研究 Angular Router 之前，我们需要一个 Angular 项目。让我们使用CMD创建一个项目，它将自动添加项目运行所需的必要内容。
ng new project-name
现在我们准备就绪。我们已经准备好开始所需的一切东西。
路由配置
创建项目后，你会看到一个新生成的文件夹，其名称与创建项目时指定的名称相同。在该文件夹中，你可以看到文件/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 {}
在这里我们需要使用路由器模块配置路由，借助RouterModule.forRoot()并导入@NgModule。
Angular 路由器在配置之前没有任何值。因此我们需要在路由数组中添加值。
配置路由数组
Routes 数组包含Route的对象。Route是一个提供许多变量的接口，但我们现在不对其进行详细介绍。
基本配置主要使用两个变量：路径 (path)和组件 (component)。
path定义 URL 路径。
组件指定组件。
让我们分别创建两个不同的组件：FirstComponent和SecondComponent。
在下面的代码片段中，您将找到使用 cmd 创建组件的命令。
ng g c first --skipTests=true
ng g c second --skipTest=true
现在我们需要用Route接口的对象来配置组件。
对象结构如下所示：
{
path:'pathString',
component:'componentname'
}
所以在上面的代码片段中，我给你提供了一个示例演示。
const routes: Routes = [
{
path: "first",
component: FirstComponent
},
{
path: "second",
component: SecondComponent
}
];
这是配置好的路线。我在路线数组中添加了两条路线。
路由器插座
现在我们需要在app.component.html中添加一个<router-outlet>标签
应用程序.组件.html
<router-outlet></router-outlet>
我们可以通过访问路径变量标题中给出的包含主机和端口的相同 URL 来访问配置的路径。
在我们的示例中，这两个 URL 是：
http://localhost:4200/first
http://localhost:4200/second
结论
Angular 路由可以方便地使应用程序的行为类似于多页应用程序。您可以在 Angular 中添加更多配置。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
