Angular 路由

导航是 Web 应用程序的一个重要方面。单页应用程序 (SPA) 没有多页概念，它从一个视图（费用列表）移动到另一个视图。

它提供清晰易懂的导航元素，决定了应用程序的成功。

Angular 提供了一套全面的导航功能，以适应复杂环境中的简单场景。

在 Angular 中，定义导航元素和关联视图的过程称为路由。Angular 提供了一个单独的模块，即路由器模块，用于在 Angular 应用程序中设置导航。

配置路由

Angular CLI 完全支持在应用程序构建过程和应用程序工作期间设置路由。让我们使用以下命令创建一个启用路由的新应用程序：

ng new routing-app

Angular CLI 为路由目的生成一个新的模块 AppRoutingModule。代码如下：

路由器模块和路由 @angular/router 包。

RouterModel 提供在应用程序中配置和执行路由的功能。

路由是用于设置导航规则的类型。

• 路由是局部变量（Route 类型），用于配置应用程序的实际导航规则。
• RouterMoudle.forRoot() 方法将设置在路由变量中配置的导航规则。

在 Angular CLI 中，AppComponent 包含生成的 AppRouting 模块，如下所述：

此处，

AppRoutingModule 使用 AppComponent 导入元数据导入模块。

Angular CLI 提供了一个选项来在现有应用程序中设置路由。

它将生成一个启用路由功能的新模块。要在现有模块 (AppModule) 中启用路由功能，我们需要包含一个附加选项，如下所述：

此处，

-module app 在 AppModule 模块中配置路由模块。

打开命令提示符。

输出

CREATE src/app/app-routing.module.ts (196 bytes) 
UPDATE src/app/app.module.ts (785 bytes)

此处，

CLI 生成 AppRoutingModule 并在 AppModule 中进行配置。

创建路由

创建路由的信息如下：

此处，

路由是 AppRoutingModule 中的变量。

当用户请求 https://:4200/about URL 时，Path 匹配 about 规则，然后将调用 AboutComponent。

访问路由

在所需位置使用 routerLink 属性。

这里，routerlink 使用 Path 设置要调用的路由。

RouterLinkActive 设置路由处于活动状态时使用的 CSS 类。

有时，我们需要在组件内部而不是模板内部访问路由。然后，我们必须遵循以下步骤：

将 Router 和 ActiveRoute 的实例注入到相应的组件中。

此处，

路由器提供执行路由操作的功能。

路由指的是当前的激活路由。

相对路径

根路径类似于网页 URL，也支持相对路径。要从另一个组件（例如主页组件）访问 AboutComponent，在 Web URL 或文件夹路径中简单地使用。

在组件中访问相对路径 -

路由顺序

路由顺序在路由配置中很重要。如果同一个 Path 配置多次，将调用第一个 Path。如果由于任何原因第一个匹配失败，将调用第二个匹配。

重定向路由

Angular 路由允许将一个 Path 重定向到另一个。有一个选项可以设置重定向路径进行重定向。路由如下：

此处，

如果实际 Path 匹配空字符串，则重定向设置为重定向路径。

通配符路由

通配符路由将匹配任何路径。它使用 ** 构建，将用于处理应用程序中不存在的路径。如果在配置的末尾放置通配符路由，并且第二个 Path 不匹配，则会调用它。

示例代码如下：

如果调用不存在的页面，前两个路由失败。但是，最后一个通配符路由将成功，并将调用 PageNotFoundComponent。

访问路由参数

在 Angular 中，我们可以使用参数将附加信息附加到路径。可以使用 paramMap 接口在组件中访问参数。在路由中创建新参数的语法如下：

我们已将 id 附加到 Path 中。它使用两种技术在 ItemComponent 中访问。

• 使用 Observable。
• 使用快照（非 observable 选项）。
• 使用 Observable

Angular 提供了一个特殊接口 paramMap，用于访问路径参数。parmaMap 具有以下方法：

is(name) - 如果指定的名称在 Path（参数列表）中可用，则返回 true。

get(name) - 返回 Path（参数列表）中指定的名称。

getAll(name) - 返回 Path 中指定名称的多个值。如果多个值可用，get() 方法只返回第一个值。

Keys - 返回 Path 中所有可用的参数。

使用 ParamMap 访问参数的步骤如下：导入 @angular/router 包中可用的 paramMap。

在 ngOnInit() 中使用 paramMap 访问参数。

我们直接在 rest 服务中使用 pipe 方法。

使用快照

快照类似于 Observable，它不支持 observable 并获取参数值。

嵌套路由

路由器出口将放置在应用程序的根组件中。但是，路由器出口可以在任何组件中使用。当路由器出口在非根组件的组件中使用时，特定组件的路由必须配置为父组件的子路由。这称为嵌套路由。

让我们考虑一个组件，例如 ItemComponent 配置了 Router-Outlet，并且它具有如下所示的两个 RouterLinks：

ItemComponent 的路由已配置为嵌套路由，如下所示：

打开命令提示符并进入项目根文件夹。

使用以下命令生成路由模块。

输出

输出 -

CREATE src/app/app-routing.module.ts (196 bytes) UPDATE src/app/app.module.ts (785 bytes)

CLI 生成 AppRoutingModule 并在 AppModule 中进行配置。

如下所示更新 AppRoutingModule (src/app/app.module.ts)：

我们更新了费用列表表格，并添加了一个新列来显示视图选项。

打开 ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.ts) 并添加获取当前选定费用条目的功能。这可以通过首先通过 paramMap 获取 ID，然后使用 ExpenseEntryService 中的 getExpenseEntry() 方法来完成。

ExpenseEntryComponent 的完整代码如下：

打开 ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.html) 模板并添加一个按钮以导航到费用列表页面。

我们在编辑按钮之前添加了转到列表按钮。

使用以下命令运行应用程序：

输出 -

单击条目的视图选项将导航到详细信息页面并显示选定的费用 -