初学者的角度指南：路由

Angular路由：构建单页应用的导航核心

在任何单页应用程序中，路由都是核心机制，它确保为当前视图或应用程序状态加载正确的组件。路由通常在应用程序加载时或用户操作触发时被请求，也可能基于服务器的输入而触发。

Angular路由器拥有许多重要的构建块。本文将展示Angular路由器最重要的部分，并在此过程中构建一个实际示例。

步骤1：安装Angular路由器

首先，您必须在项目中安装Angular路由器。Angular路由器是一个极其强大的基于JavaScript的路由器，由Angular核心团队创建和维护。

您可以轻松地从@angular/router包安装路由器。安装@angular/router包有两种不同的方法，您需要在您的index.html文件中设置应用程序的根路由。在应用程序的根文件夹中，您可以找到index.html文件。在这里，使用“/”路径添加基本位置。此更改告诉Angular所有不同路由的起始位置。

<base href="/">
<title>Angular Routing</title>

步骤2：将依赖项添加到app.module.ts

如果您要使用NgModule，则应用程序的主要App Module必须具有NgModule声明。此文件必须使用以下组件进行修改：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, RouterModule],
  bootstrap: [AppComponent],
  declarations: [AppComponent],
})
export class AppModule {}

步骤3：配置RouterModule

RouterModule需要关于单页应用程序中路由的信息。在提供此信息之前，RouterModule有两个静态方法可用于向路由器提供应用程序中路由的所需配置。这就是整个设置完成的时候。

当为应用程序的根配置定义路由时，可以使用名为forRoot的静态方法访问应用程序中的多个路由指令。以下是一个小的代码片段，展示了如何使用forRoot。在许多情况下，如果将路由存储在单独的文件中并导入到下面的ROUTES数组中，则会更易于阅读和维护。

接下来，我们有RouterModule.forRoot。主要区别在于forRoot。应用程序中的模块可以定义和配置自己的路由。根据需要，这些路由可以导入到主模块中。

这是一个小的代码片段，我们在其中使用router-outlet。当我们的路由器识别要为路由加载的组件时，该组件将动态创建。动态创建的组件将沿着router-outlet元素注入。在AppComponent中，您可以按如下方式注入指令：

import { Component } from '@angular/core';

@Component({
  selector: 'appComponent',
  template: `
<div>
<h1>Angular Routing</h1>
<router-outlet></router-outlet>
</div>
  `,
})
export class AppComponent {}

设置到此结束。现在，我们可以研究项目的具体需求并开始构建路由。

步骤4：为单页应用程序创建路由

我们将在以下文件中构建应用程序的路由：app.routing.ts。构建单页应用程序时，拥有静态路由至关重要。在我们的例子中，静态路由将是应用程序加载的首页。

这是我们的routes数组：

export const AppRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'calc', component: CalcComponent },
    { path: '**', component: NotFoundComponent }
];

• 空路径表示静态路由。
• ** 表示如果没有任何其他匹配路由，应该加载什么。

步骤5：导航

使用上面创建的路由和配置更改，我们就可以进行导航了。让我们首先为我们的应用程序创建一个名为routerLink的主组件，routerLink是一个Angular指令，您可以在其中从一个路由路由到另一个路由，而无需更改URL栏中的值。如果要创建动态路由，则需要包装[routerLink]=['/path', variable]。

这是我们的home.component.html文件，其中包含静态路由链接。

<h2>
    Welcome to Home Page
</h2>

<nav>
<a routerlink="/calc" routerlinkactive="active">Go to Calc</a>
</nav>

这是相应的home.component.ts文件：

import { Component } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: 'home.component.html'
})
export class HomeComponent {}

默认情况下，当您加载应用程序时，“”路径对应于/calc，将显示以下视图。为什么？因为在我们的app.routing.ts中CalcComponent。

现在，您已经了解了路由的基础知识，您已经为您的应用程序创建了一个登录页面和一个路由！接下来，我们将介绍Angular路由中的一些高级概念。

高级路由概念

动态路由参数

在单页应用程序中，您可能会使用多个操作来访问特定路由。例如，在我们的计算器应用程序中，URL片段中的:。冒号告诉路由器输入的值不是URL的一部分，而是路由参数。

export const AppRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'calc/:operation', component: CalcComponent },
    { path: '**', component: NotFoundComponent }
];

我们已经建立了一个动态路由。现在，当我们创建链接或在地址栏中键入地址时，我们可以轻松地交换加法、除法等操作。

现在是我们的下一个挑战。您将如何从路由URL中提取动态路由信息？大多数情况下，我们使用ngOnInit及其在组件生命周期中的作用。

为了访问动态路由参数，我们使用ActivatedRoute包含一个params。通过订阅ngOnInit。当我们从一个参数路由到另一个参数时，实际的路由组件不会被销毁。这是Angular用于提高性能的技术。当您在ActivatedRoute处订阅时。

// 路由定义为 path = '/calc/:operation'

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'calc.component',
  templateUrl: './calc.component.html'
})
export class CalcComponent implements OnInit {
  operation: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.params.subscribe((params) => this.operation = params.operation);
  }
}

创建子路由

到目前为止，我们已经看到了只包含单层级的路由。现在，让我们定义多层级的路由。例如，单层级路由将是/calc/addition。

我们可以分配/calc/addition将具有另一个组件。为了实现此行为，我们在父组件中使用<router-outlet></router-outlet>，路由将在其中呈现。

有时，我们可能根本不使用父路由的特定组件。在这种情况下，我们可以从路由声明中删除组件。这也称为无组件路由。

这是一个简单的示例，可以帮助您理解这些概念。

// 定义路由
export const ROUTES: Routes = [
  {
    path: 'calc',
    component: CalcComponent,
    children: [
      { path: 'addition', component: CalcAdditionComponent },
      { path: 'subtraction', component: CalcSubstractionComponent },
    ],
  },
];

// 无组件路由
export const ROUTES: Routes = [
  {
    path: 'calc',
    children: [
      { path: 'addition', component: CalcAdditionComponent },
      { path: 'subtraction', component: CalcSubtractionComponent },
    ],
  },
];
@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
})


// 构建父组件
import { Component } from '@angular/core';

@Component({
  selector: 'calc.component',
  template: `
<div>
<calc-addition></calc-addition>
<calc-subtraction></calc-subtraction>
<router-outlet></router-outlet>
</div>
  `,
})
export class CalcComponent {}

从不同的模块获取路由

随着应用程序的增长，处理路由可能是一个挑战。有时您需要从不同的模块获取路由。在这种情况下，您可以使用RouterModule.forChild()。

让我们从一个例子开始：

// 子路由
export const ROUTES: Routes = [
  {
    path: '',
    component: CalcComponent,
    children: [
      { path: 'addition', component: CalcAdditionComponent },
      { path: 'subtraction', component: CalcSubtractionComponent },
    ],
  },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(ROUTES)],
})
export class CalcModule {}

// 父路由
export const ROUTES: Routes = [
  {
    path: 'calc',
    loadChildren: './calc/calc.module#CalcModule',
  },
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
})
export class AppModule {}

从上面的代码中需要理解的一些有趣的方面是：

• 我们有一个空路径。这是因为我们不希望路由路径为CalcModule必须导入到根/calc/**中。

总结

在本教程中，您学习了如何在Angular中处理路由的基础知识。您学习了如何定义路由以及如何通过Angular应用程序以不同的方式进行导航。本文中讨论的概念涵盖了基础知识。掌握基础知识后，您将能够更深入地研究更高级的Angular路由概念，例如激活守卫、路由导航等等。

以上是初学者的角度指南：路由的详细内容。更多信息请关注PHP中文网其他相关文章！