在 Angular 中配置路由

2020-07-22 08:00:00 · 飞浪

Angular Router 允许您在某些事件之后向用户显示多个页面，从而在单页应用程序中创建多页应用程序的体验。

介绍

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 中添加更多配置。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 中配置路由

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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