首页 >web前端 >js教程 >角路由器：组件路由的简介

角路由器：组件路由的简介

Lisa Kudrow原创: 2025-02-15 12:20:13921浏览

角路由器：组件路由的简介

这是SitePoint Angular 2教程的第4部分，介绍了如何使用Angular CLI创建CRUD应用程序。在本文中，我们将介绍Angular路由器，并了解当浏览器URL更改时如何更新我们的应用程序，反之亦然。我们还将学习如何使用路由器更新我们的应用程序以从后端API解决数据。

在第一部分中，我们学会了如何将待办器应用程序启动，运行并部署到github页面。这效果很好，但是不幸的是，整个应用都被挤入了一个组件。在第二部分中，我们检查了一个更模块化的组件体系结构，并学习了如何将这个单个组件分解为一个较小的组件的结构化树，这些成分易于理解，重复使用和维护。在第三部分中，我们更新了应用程序，以使用RXJ和Angular的HTTP服务与REST API后端进行通信。

第0部分 - 终极角度CLI参考指南

第1部分 - 获取我们的第一个todo应用程序启动和运行

>
通信
>
不用担心！您不需要遵循本教程的第一部分，两个或三个，就可以使四个教程有意义。您只需获取我们的存储库的副本，从第三部分查看代码，然后将其作为起点。这将在下面更详细地进行说明。
钥匙要点

路由器处理浏览器URL更改并更新应用程序状态，从而使应用程序可以动态地对URL更改做出反应，而无需重新加载页面。
Angular路由器中的路线护罩通过根据用户身份验证或其他条件来控制访问来帮助保护某些路线，以确保只有授权用户才能访问应用程序的特定部分。

>向上并运行

>确保已安装了最新版本的Angular CLI。如果不这样

如果您需要删除Angular CLI的先前版本，则可以执行此操作：>

之后，您需要第三部分中的代码副本。这可以在Github上找到。本系列中的每个文章在存储库中都有一个相应的标签，因此您可以在应用程序的不同状态之间来回切换。

我们在第三部分中以本文开始的代码被标记为第3部分。我们结束本文的代码被标记为第4部分。

>您可以将标签视为特定提交ID的别名。您可以使用Git Checkout在它们之间切换。您可以在此处阅读更多信息。

>因此，要启动并运行（已安装了Angular CLI的最新版本），我们将执行此操作：

<span>npm install -g @angular/cli@latest
</span>

然后访问http：// localhost：4200/。如果一切顺利，您应该看到工作的todo应用程序。

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

快速回顾

这是我们的应用程序体系结构在第3部分的末尾的样子：>

在本文中，我们将：

了解为什么应用程序可能需要路由
了解JavaScript路由器是什么
了解什么是角路由器，它的工作方式以及它可以为您做什么
>的路由
中获取戒酒的解析器

>何时以及为什么您的应用程序可能需要路由

服务器上的路由与浏览器中的路由之间的区别
如何设置Angular Router
如何为应用程序配置路由
>如何告诉角路由器在dom
如何优雅地处理未知URL
什么是解析器，它可以用于
>如何使用Angular路由器来解决数据。
所以，让我们开始吧！
为什么要路由？

在当前状态下，我们的Web应用程序不考虑浏览器URL。

>我们通过一个URL访问我们的应用程序，例如http：// localhost：4200，我们的应用程序不知道任何其他URL，例如http：// localhost：4200/todos。

>大多数Web应用程序都需要支持不同的URL，以将用户导航到应用程序中的不同页面。那是路由器进来的地方。

在传统网站中，路由由服务器上的路由器处理：>

一个用户单击浏览器中的链接，导致URL更改

浏览器将HTTP请求发送到服务器

服务器从HTTP请求读取URL并生成适当的HTTP响应

服务器将http响应发送到浏览器。

在现代JavaScript Web应用程序中，路由通常由浏览器中的JavaScript路由器处理。
什么是JavaScript路由器？

>当浏览器URL更改

时更新Web应用程序状态

>在Web应用程序状态更改时更新浏览器URL。

> JavaScript路由器使我们有可能开发单页应用程序（SPA）。

>水疗中心是一个Web应用程序，可提供类似于桌面应用程序的用户体验。在水疗中心，所有与后端的通信都发生在幕后。

>用户从一个页面导航到另一页时，即使URL更改，该页面也会动态更新，而无需重新加载。

。

>
>。
什么是角路由器？
>
>这是一个JavaScript路由器的实现，旨在与Angular一起使用，并包装为 @angular/Router。
首先，Angular Router负责JavaScript路由器的职责：

>当用户导航到某个URL
- 它使用户可以从一个页面导航到另一页，而无需页面重新加载
- 它更新了浏览器的历史记录，以便用户可以在页面之间来回导航时使用和
- forward> forward> forward> forward>。此外，Angular Router允许我们： >将URL重定向到另一个URL
在激活或停用页面时运行脚本
lazy load Load我们应用程序的部分。
- 在本文中，我们将学习如何设置和配置Angular路由器，如何重定向URL以及如何使用Angular Router从我们的后端API中解析Todos。在下一篇文章中，我们将在应用程序中添加身份验证，并使用路由器来确保只有在用户登录时才能访问某些页面。>
- 角路由器的工作方式
- >在我们深入了解代码之前，重要的是要了解角路由器的运行方式及其介绍的术语。
>它读取用户想要导航到
>的浏览器URL
它应用URL重定向（如果定义了）
>
它可以弄清哪个路由器状态对应于url
>
>它运行在路由器状态下定义的警卫

>它可以解决路由器状态
的所需数据
它激活角组件以显示页面
1. >当请求新页面时，它管理导航并重复上述步骤。
2. 为了完成其任务，Angular Router介绍了以下术语和概念：
- >路由器服务：我们应用程序中的全球角路由器服务
- 路由器配置：所有可能的路由器状态的定义我们的应用程序可以在
- 激活的路由快照：提供对路由器状态节点>的URL，参数和数据的访问权限
- >
- >
- 不用担心术语是否听起来很强烈。当我们在本系列中逐渐解决这些术语时，您会习惯这些术语，并且随着您在Angular Router中获得更多的经验。
>更深入地查看角路由过程，请确保查看Angular Router导航的7步路由过程。

启用路由

要在我们的角度应用中启用路由，我们需要做三件事：
>

创建一个路由配置，该配置为我们的应用程序定义了可能的状态
>将路由配置导入我们的应用程序

添加一个路由器插座，以告诉角路由器将激活的组件放在dom。
/：显示todos
的列表

将显示Todos的列表作为我们应用程序的主页。> 但是，当用户书签 /浏览器中的用户书签 /咨询他们的毒品列表时，我们更改了主页的内容（我们将在本系列的第5部分中进行），他们的书签将不再显示其列表todos。

>所以让我们列出我们的待办事项清单自己的URL，然后将我们的主页重定向到其中：>

/：重定向到 /todos
这为我们带来了两个好处：
- >用户在Todos页面上添加书签时，他们的浏览器将添加书签 /todos而不是 /，即使我们更改主页contents
- >现在，我们可以通过将其重定向到我们喜欢的任何URL来轻松更改我们的主页，如果您需要定期更改主页内容，这很方便。
官方Angular样式指南建议将Angular模块的路由配置存储在文件中，并在-routing.module.ts中输出文件名，该文件名导出一个单独的Angular模块，并在routingModule中结束名称。
我们的当前模块称为AppModule，因此我们创建一个文件src/app/app-routing.module.ts，并将路由配置导出为称为apploutingModule的角度模块：
```
npm install -g @angular/cli@latest

```
首先，我们从 @angular/Router导入Routermodule和路由：
接下来，我们定义一个类型路由的可变路由并分配我们的路由器配置：
```
npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

```
>
```
git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-3
npm install
ng serve
```
路由类型是可选的，可以让IDEScript支持或打字稿编译器在开发过程中方便地验证您的路线配置。
>
路由器配置表示我们的应用程序中所有可能的路由器状态。
它是一棵路由树，定义为JavaScript数组，每个路线都可以具有以下属性：>

路径：字符串，匹配URL
的路径
- >
- >
- >
- 我们的应用程序很简单，仅包含两个同级路由，但是较大的应用程序可以使用儿童路由的路由器配置，例如：
>在这里，Todos有两个子路由，ID是一个路由参数，使路由器能够识别以下URL：
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
 {
 path: '',
 redirectTo: 'todos',
 pathMatch: 'full'
 },
 {
 path: 'todos',
 component: AppComponent
 }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule],
 providers: []
})
export class AppRoutingModule {
}

```
/：主页，重定向到 /todos
- 的列表
- >
>前缀：默认值，匹配url时，从路径的值开始
完整：匹配URL等于路径的值时匹配。
>

我们可以创建以下途径：
>

在这种情况下，Angular Router应用默认的前缀路径匹配策略，并且每个URL都会重定向到Todos，因为每个URL均以路径中指定的空字符串开头。
>我们只希望将主页重定向到Todos，因此我们添加路径：'Full'以确保仅匹配的URL'

npm install -g @angular/cli@latest 
>要了解有关不同路由配置选项的更多信息，请查看有关路由和导航的官方角文档。
> 最后，我们创建和导出一个角模块批准模块：

有两种创建路由模块的方法：

npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest 

routermot.forroot（路由）：创建一个包括路由器指令，路由配置和路由器服务
>的路由模块
routermodule.forchild（路由）：创建一个包括路由器指令，路由配置而不是路由器服务的路由模块。>
当您的应用程序具有多个路由模块时，需要
Routermodule.forchild（）方法。

请记住，路由器服务会照顾我们的应用状态和浏览器URL之间的同步。实例化与同一浏览器URL交互的多个路由器服务将导致问题，因此，无论我们在应用程序中导入多少路由模块，我们的应用程序中只有一个实例的路由器服务实例。
>
>当我们导入使用Routermot.forroot（）创建的路由模块时，Angular将实例化路由器服务。当我们导入使用routermodule.forchild（）创建的路由模块时，Angular将不会实例化路由器服务。
>
因此，我们只能使用routermot.forroot（）一次，然后多次使用routermot.forchild.forchild.forchild（）进行其他路由模块。
>
由于我们的应用程序只有一个路由模块，因此我们使用routermotule.forroot（）：
>

此外，我们还指定了导出属性中的routermodule：>

这可以确保我们不必在AppModule imports ApploutingModule时再次在AppModule中明确导入Routermodule。
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-3 npm install ng serve
>现在我们有了批准模块，我们需要在AppModule中导入它才能启用它。

导入路由配置
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: AppComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [] }) export class AppRoutingModule { } 

>要将我们的路由配置导入应用程序，我们必须将批准模块导入我们的主要AppModule。
>让我们打开src/app/app.module.ts，然后将ApploutingModule添加到AppModule的@ngmodule metadata中的导入阵列：
>

由于批准模块在其出口属性中列出了路由模块，因此当我们导入批准模块时，Angular将自动导入RoutingModule，因此我们不必再次明确导入Routermodule（尽管这样做不会造成任何损害）。
）。
）。
）。
>在我们可以在浏览器中尝试更改之前，我们需要完成第三步也是最后一步。
添加路由器插座
import { RouterModule, Routes } from '@angular/router'; 

尽管我们的应用程序现在具有路由配置，但我们仍然需要告诉Angular Router，它可以将实例化组件放置在DOM中。当我们的应用程序被引导时，Angular会启用AppComponent时，因为AppComponent在AppModule的Bootstrap属性中列出

告诉角路由器可以放置组件的位置，我们必须将元素添加到AppComponent的HTML模板中。
npm install -g @angular/cli@latest 
元素告诉角路由器在何处可以在dom中实例化组件。

>如果您熟悉AngularJS 1.x路由器和UI-Router，则可以考虑 ng-view和ui-view的角度替代品。

没有元素，Angular Router不知道将组件放置在哪里，并且只有AppComponent自己的HTML才会渲染。> > appComponent当前显示todos的列表。
>
但我们现在希望AppComponent包含AppComponent，而不是让AppComponent显示todos的列表，而是包含，并告诉Angular Router以实例化AppComponent中的另一个组件以显示Todos列表。 🎜> 为了实现这一目标，让我们使用Angular CLI生成一个新的组件todoscomponent：

>我们还将所有HTML从src/app/app.component.html移动到src/app/todos/todos/todos.component.html：

>我们还将所有逻辑从src/app/app.component.ts移动到src/app/todos/todos/todos.component.ts：

现在，我们可以在src/app/app.component.html中替换appcomponent的模板：
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest 

>我们还可以从src/app/app.component.ts中的AppComponent类中删除所有已过时的代码：
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-3 npm install ng serve

最后，我们在src/app/app-routing.module.ts中更新我们的todos路由，以实例化todoscomponent，而不是appcomponent：
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: AppComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [] }) export class AppRoutingModule { } 

现在，当我们的应用程序被引导时，Angular启用了AppComponent并找到 Angular Router可以实例化和激活组件。
import { RouterModule, Routes } from '@angular/router'; 
>。
>让我们在浏览器中尝试更改。
>
const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: AppComponent } ]; 
>通过运行：
启动开发服务器和后端API

const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', children: [ { path: '', component: 'TodosPageComponent' }, { path: ':id', component: 'TodoPageComponent' } ] } ]; 
然后将浏览器导航到http：// localhost：4200。

> Angular路由器读取路由器配置，并自动将我们的浏览器重定向到http：// localhost：4200/todos。
如果您检查页面上的元素，您会看到todosComponent在中没有渲染，而是在其旁边：>

我们的应用程序现在已启用路由。太棒了！

// no pathMatch specified, so Angular Router applies // the default `prefix` pathMatch { path: '', redirectTo: 'todos' } 
添加通配符路线

>当您将浏览器导航到http：// localhost：4200/tormatched-url，并且您打开浏览器的开发人员工具时，您会注意到，Angular Router将以下错误记录到控制台：
>

才能优雅地处理无与伦比的URL，我们需要做两件事：>

> Create PagenotFoundComponent（如果愿意，您可以以不同的方式命名），以显示一条友好的消息，该消息无法找到所请求的页面。
告诉Angular Router在没有路由匹配所请求的URL时显示PagenotFoundComponent。

让我们从使用Angular CLI生成PagenotFoundComponent首先

然后在src/app/page-not-not/page-not-found.component.html中编辑其模板：

npm install -g @angular/cli@latest 

接下来，我们使用**作为路径添加通配符路线：>
**> **匹配任何URL，包括儿童路径。
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest 

现在，如果您将浏览器导航到http：// localhost：4200/tormatched-url，则显示PagenotfoundComponent。
请注意，通配符路由必须是我们路由配置中的最后一条路线，才能按预期工作。
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-3 npm install ng serve
当Angular路由器匹配请求URL与路由器配置匹配时，它在找到第一个匹配时就会停止处理。

，如果我们要将路线的顺序更改为此：>

将永远无法达到戒酒，并且将显示pagenotfoundcomponent，因为通配符路线将首先匹配。
>。
我们已经做了很多事情，所以让我们快速回顾到目前为止取得的成就：>

我们设置了Angular Router

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: AppComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [] }) export class AppRoutingModule { } 
我们为应用程序创建了路由配置

我们将AppComponent重构为ToDosComponent 我们添加了在AppComponent的模板

我们添加了一条通配符路线，以优雅地处理无与伦比的URL。
接下来，我们将使用Angular Router创建一个从后端API获取现有的Todos的解析器。
使用Angular Router
解决数据

在本系列的第3部分中，我们已经学习了如何使用Angular HTTP服务从后端API获取数据。

当前，当我们将浏览器导航到Todos URL时，发生以下情况：>
匹配中
todosComponent在浏览器中显示了带有todos
的空数组
在thetodoscomponent的ngoninit处理程序的API中获取戒酒
>
在浏览器中更新了TodoScomponent，从API获取Todos。

如果在步骤5中加载Todos需要三秒钟，则将在步骤6中显示实际的Todos之前，在三秒钟内显示用户三秒钟的空白列表。
如果todoScomponent在其模板中具有以下HTML：

然后，在显示实际的Todos之前，用户将看到此消息三秒钟，这可能完全误导用户并导致用户在实际数据进来之前导航。
>我们可以将加载程序添加到todosComponent，该加载程序在加载数据时显示旋转器，但有时我们可能无法控制实际组件，例如，当我们使用第三方组件时。
要解决这种不必要的行为，我们需要以下以下事情：
>
匹配 > 中
todosComponent显示在浏览器中，从API获取todos。

>在这里，直到我们的API后端数据可用之前，才显示todosComponent。
这正是解析器可以为我们做的。
>
>让角路由器在激活todosComponent之前就可以解决戒毒者，我们必须做两件事：

创建一个todosresolver，从api
中获取招待
>告诉Angular路由器在激活Todos Coute中的TodoScomponent时，使用TodoSresolver来获取毒品。
>

>通过将解析器连接到Todos路线，我们要求Angular路由器首先解析数据，然后再激活TodoScomponent。
因此，让我们创建一个解析器来获取我们的戒酒。>
创建todosresolver

Angular CLI没有生成解析器的命令，因此，让我们手动创建一个新的文件src/todos.resolver.ts，并添加以下代码：>

我们将解析器定义为实现Resolve接口的类
>
解决方案接口是可选的，但是让我们的打字稿IDE或编译器确保我们通过要求我们实现resolve（）方法来正确实现类。

> 当角路由器需要使用解析器解析数据时，它将调用解析器的resolve（）方法，并期望resolve（）方法返回值，承诺或可观察的。
>如果resolve（）方法返回承诺或可观察的角路由器将等待承诺或可观察到的诺言，或者在激活路线的组件之前完成。
调用Resolve（）方法时，Angular Router便利地通过激活的路由快照和路由器状态快照，以为我们提供对数据的访问（例如路由参数或查询参数），我们可能需要解决数据。 🎜>
TodoSresolver的代码非常简洁，因为我们已经有一个与API后端进行所有通信的TodoDataservice。
我们在构造函数中注入tododataservice，并使用其getalltodos（）方法在resolve（）方法中获取所有todos。
npm install -g @angular/cli@latest 
解决方法返回可观察到的todo []的可观察的方法，因此Angular路由器将在激活路线组件之前等待可观察到的可观察到的。
>现在我们有了解决方案，让我们配置Angular路由器以使用它。通过路由器
解决戒酒

要使角路由器使用解析器，我们必须将其连接到路线配置中的路由。
>让我们打开src/app-routing.module.ts，然后将我们的todosresolver添加到Todos路线：

npm install -g @angular/cli@latest 
我们导入todosresolver：

也将其添加为解析器Todos路线：
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest 

这告诉Angular路由器使用TodoSresolver解析数据，并将解析器的返回值分配为路由数据中的Todos。
>可以从ActivatedRoute或ActivatedRoutesNapshot访问路由的数据，我们将在下一节中看到。
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-3 npm install ng serve
>您可以使用路由的数据属性直接将静态数据添加到路由数据：>

>您还可以使用路由的解析属性中指定的解析器添加动态数据：>

>您也可以同时完成这两个：

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: AppComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [] }) export class AppRoutingModule { } 
>一旦解决了分解属性的解析器，它们的值就与数据属性中的静态数据合并，并将所有数据作为路线的数据提供。
>角路由器使用角度依赖注入来访问解析器，因此我们必须通过将其添加到AcressutingModule的@ngmodule Metadata中：
>
import { RouterModule, Routes } from '@angular/router'; 
>，确保将其添加到Angular的依赖注入系统中：

>当您导航浏览器到http：// localhost：4200，Angular Router立即：
const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: AppComponent } ]; 

>从 /到 / todos
重定向URL
看到Todos路线在其Resolve属性中定义了TodoSresolver
const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', children: [ { path: '', component: 'TodosPageComponent' }, { path: ':id', component: 'TodoPageComponent' } ] } ]; 
>从TodoSresolver运行Resolve（）方法，等待结果，并将结果分配给路由数据中的Todos
激活todosComponent。

>如果您打开了开发人员工具的网络选项卡，您会发现Todos现在从API中获取了两次。一旦通过Angular路由器，一次由TodoScomponent中的ngoninit处理程序。
使用已解决的数据
让我们打开App/src/todos/todos.component.ts。
ngoninit（）处理程序当前直接从API中获取Todos：>

现在，Angular Router使用TodoSresolver获取了Todos，我们想从路由数据而不是API中获取TodoScomponent中的todos。

>要访问路由数据，我们必须从 @angular/Router导入ActivatedRoute：

并使用角度依赖注入来获取激活途径的手柄：>

>最后，我们更新了ngoninit（）处理程序以从路由数据而不是API获取戒烟

我们用this.route.data.map（（（data）=> data ['todos']）替换this.tododataservice.getalltodos（），并且所有其余的代码都保持不变。

如果您将浏览器导航到Localhost：4200并打开网络选项卡，则您将不再看到两个HTTP请求从API中获取Todos。

任务完成了！我们已经成功地集成了Angular路由器！

在总结之前，让我们进行单元测试：>

一个单位测试失败：

<span>npm install -g @angular/cli@latest
</span>

>测试todoScomponent时，测试台不了解todolistheadercomponent，因此Angular抱怨它不知道App-todo-list-Header元素。

为了解决此错误，让我们打开应用程序/src/todos/todos.component.spec.ts，然后添加no_errors_schema到测试床选项：>

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

现在，业力显示了另一个错误：

>让我们将必要的提供商添加到测试床选项中：

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

这再次引起了另一个错误：

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

>让我们再添加一个用于ActivatedRoute的提供商到测试台选项：

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

我们为ActivatedRoute分配了一个模拟对象的提供商，该对象包含可观察的数据属性，以揭示Todos的测试值。

现在，单元测试成功通过：

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

神话般！要将我们的应用程序部署到生产环境中，我们现在可以运行：

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

我们将生成的DIST目录上传到我们的托管服务器。那有多甜？

我们在本文中介绍了很多，所以让我们回顾一下我们学到的东西。

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

摘要

在第一篇文章中，我们学会了如何：

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

>使用Angular Cli

初始化我们的TODO应用程序

创建一个todo类来表示单个todos

>创建一个TodoDataservice服务，以创建，更新和删除todos
使用AppComponent组件显示用户界面

>将我们的应用程序部署到github页面

在第二篇文章中，我们重构AppComponent将其大部分工作委派给：>

todolistComponent显示todos
的列表
a todolistitemComponent显示一个单todo

todolistheadercomponent创建一个新的todo

todolistFooterComponent显示剩下多少个毒品。
>

在第三篇文章中，我们学会了如何：
>

创建模拟REST API后端

将API URL作为环境变量存储
创建一个apiservice与REST API
进行通信
>更新tododataservice以使用新的apiservice

更新AppComponent以处理异步API调用

创建一个apimockservice，以避免运行单元测试时真正的http调用。

在第四篇文章中，我们学会了：

为什么应用程序可能需要路由

JavaScript路由器是什么
什么是角路由器，它的工作原理以及它可以为您做什么
>如何设置Angular路由器并为我们的应用程序配置路由
>如何告诉角路由器在dom
>中将组件放置在哪里
如何优雅地处理未知URL

>如何使用解析器让角路由器解析数据。

本文中的所有代码均可在GitHub上获得。
>
在第五部分中，我们将实施身份验证以防止未经授权访问我们的应用程序。
>请继续关注更多，一如既往，请随时在评论中留下您的想法和问题！

推荐课程

角度和打字稿的在线课程托德座右铭专家领导的在线AngularJ，为个人和团队提供的角度和打字稿培训课程。结帐时使用优惠券代码“ SitePoint”以获得25％的折扣。
经常询问的问题（常见问题解答）关于使用Angular Router的组件路由

>角路由器在Web开发中的重要性是什么？>
如何处理404误差或错误的URL？

Angular Router提供了一种称为Wildcard路由的功能处理未知或不正确的URL。当路由器遇到与任何预定义路线不匹配的URL时，它可以重定向到“未找到”页面或任何其他后备页面。这是通过使用路径'**'定义路由并将其与所需组件相关联的路由来实现的。

我可以在Angular Router中的路由之间传递数据吗？使用称为路由参数的功能之间的路由之间的数据。路由参数是可以更改的URL的一部分，组件可以使用其值来动态显示内容或确定行为。当您想导航到列表中的项目的详细信息时，这特别有用。
>
>如何使用Angular路由器保护应用程序中的某些路线？路线护罩是可以告诉路由器的接口，是否应允许导航到请求的路线。它们可用于根据用户身份验证，基于角色的访问控制或任何其他自定义标准来控制访问。
>

> Angular Router如何处理浏览器历史记录和返回按钮功能？通过位置服务与浏览器的历史记录进行交互。它使用HTML5历史记录API更改URL而不会引起整页重新加载。这意味着浏览器的背部和前向按钮将按预期工作，在应用程序状态之间导航。

我可以用Angular Router懒负载模块吗？

是的，是的，Angular路由器支持Lazy Loading。模块。这意味着您的应用程序的某些模块可以按需加载，而不是在应用程序的初始负载下加载。这可以显着提高应用程序的初始负载性能。
>
我如何在Angular路由器中调试路由问题？

Angular Router提供了一个称为路由器事件的功能，可用于登录和调试路由行为。这些事件包括导航启动，导航端，路线识别以及许多其他事件。通过订阅这些事件，您可以获取有关路由过程的详细信息。

我可以在Angular路由器中使用嵌套路由吗？。这使您可以创建更复杂的导航结构，其中某些路线具有与之关联的子路由。这对于创建层次导航结构特别有用。

>如何在Angular路由器中进行动画路由过渡？这可用于在应用程序的不同状态之间创建视觉上吸引人的过渡，增强用户体验。

我可以预紧装置模块以在Angular Router中更快导航吗？特征称为预加载模块的预加载策略。这意味着在应用程序的初始负载之后，可以将某些模块加载到后台。这可以大大提高应用程序的导航速度，因为在需要时已经加载了这些模块。

以上是角路由器：组件路由的简介的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：A Beginner’s Guide to Babel下一篇：Debugging JavaScript Projects with VS Code & Chrome Debugger

查看更多

角路由器：组件路由的简介

钥匙要点

>水疗中心是一个Web应用程序，可提供类似于桌面应用程序的用户体验。在水疗中心，所有与后端的通信都发生在幕后。

什么是角路由器？

>

>将路由配置导入我们的应用程序

将显示Todos的列表作为我们应用程序的主页。> 但是，当用户书签 /浏览器中的用户书签 /咨询他们的毒品列表时，我们更改了主页的内容（我们将在本系列的第5部分中进行），他们的书签将不再显示其列表todos。

由于批准模块在其出口属性中列出了路由模块，因此当我们导入批准模块时，Angular将自动导入RoutingModule，因此我们不必再次明确导入Routermodule（尽管这样做不会造成任何损害）。

>

>如果resolve（）方法返回承诺或可观察的角路由器将等待承诺或可观察到的诺言，或者在激活路线的组件之前完成。

解决戒酒

我们用this.route.data.map（（（data）=> data ['todos']）替换this.tododataservice.getalltodos（），并且所有其余的代码都保持不变。

>

>如何使用Angular路由器保护应用程序中的某些路线？路线护罩是可以告诉路由器的接口，是否应允许导航到请求的路线。它们可用于根据用户身份验证，基于角色的访问控制或任何其他自定义标准来控制访问。

我可以用Angular Router懒负载模块吗？

我如何在Angular路由器中调试路由问题？

Angular Router提供了一个称为路由器事件的功能，可用于登录和调试路由行为。这些事件包括导航启动，导航端，路线识别以及许多其他事件。通过订阅这些事件，您可以获取有关路由过程的详细信息。

>如何在Angular路由器中进行动画路由过渡？这可用于在应用程序的不同状态之间创建视觉上吸引人的过渡，增强用户体验。

相关文章