Angular 路由器:使用 RouterLink、Navigate 或 NavigateByUrl 进行导航

本文主要是介绍Angular 路由器:使用 RouterLink、Navigate 或 NavigateByUrl 进行导航,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

介绍

在 Angular 中,RouterLink 是一个用于以声明方式导航到不同路由的指令。Router.navigateRouter.navigateByURLRouter 类中可用的两种方法,用于在组件类中以命令方式导航。

让我们来探讨如何使用 RouterLinkRouter.navigateRouter.navigateByURL

使用 RouterLink

HTML 中的典型链接如下所示:

<a href="/example">Example HTML link.
</a>

这个示例链接将用户引导到 /example 页面。

然而,单页面应用程序(SPA)没有不同的页面可供链接。相反,它有不同的 视图 可以展示给用户。为了允许用户导航和更改视图,您将希望使用 RouterLink 指令而不是 href

<a routerLink="/users/sammy">Link that uses a string.
</a>

这个 RouterLink 示例将用户引导到 /users/sammy 组件。

不同的 URL 段也可以像这样以数组的形式传递:

<a [routerLink]="['/', 'users', 'sammy']">Link that uses an array.
</a>

这两个示例格式不同,但将引导到相同的 /users/sammy 组件。

相对路径

您可以使用 '../ 来在导航中向上移动到更高级别,使用类似以下的内容:

<a [routerLink]="['../', 'posts', 'sammy']">Link that goes up a level.
</a>

在这个示例中,如果用户在 /users/sammy,导航将变为 /posts/sammy

可以在第一个 URL 段之前加上 ./../ 或没有前导斜杠。

参数

您可以通过在 URL 段列表中传递对象来传递参数到导航中:

<a [routerLink]="['/', 'users', {display: 'verbose'}, 'sammy']">Link with parameter.
</a>

在这个示例中,Router 将导航到 /users;display=verbose/sammy

命名出口

您可以告诉 Router 在命名的 outlet 中放置什么,类似以下的内容:

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'] } }]">Link with a side outlet.
</a>

在这个示例中,sammy 段将被放置在名为 sideoutlet 中。

也可以告诉 Router 在多个命名的 outlet 中放置什么,类似以下的内容:

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]">Link with a side and footer outlets.
</a>

在这个示例中,sammy 段将被放置在名为 sideoutlet 中,而 sharks 段将被放置在名为 footeroutlet 中。

使用 Router

在 Angular 的 Router 类中有两种方法可供在组件类中以命令方式导航:Router.navigateRouter.navigateByUrl。这两种方法都返回一个 promise,如果导航成功则解析为 true,如果没有导航则解析为 null,如果导航失败则解析为 false,如果出现错误则完全被拒绝。

要使用其中任何一种方法,首先要确保 Router 类被注入到您的组件类中。

首先,将 Router 导入到您的组件类中:

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

然后,将 Router 添加到依赖项中:

@Component({// ...
})
export class AppComponent {constructor(private router: Router) {// ...}// ...
}

现在,您可以使用 Router.navigateRouter.navigateByUrl

Router.navigate

您可以将 URL 段的数组传递给 Router.navigate

以下是使用 Router.navigate 方法的基本示例:

goPlaces() {this.router.navigate(['/', 'users']);
}

以下是演示 Router.navigate 如何 thenable 的示例:

goPlaces() {this.router.navigate(['/', 'users']).then(nav => {console.log(nav); // 如果导航成功则为 true}, err => {console.log(err) // 当出现错误时});
}

在这个示例中,如果 Router.navigate 成功,它将显示 true。如果 Router.navigate 失败,它将显示一个错误。

Router.navigateByUrl

Router.navigateByUrlRouter.navigate类似,不同之处在于传入的是字符串而不是URL片段。导航应该是绝对的,并以/开头。

以下是使用Router.navigateByUrl方法的基本示例:

goPlaces() {this.router.navigateByUrl('/users;display=verbose/sammy');
}

在这个示例中,Router.navigateByUrl将导航到/users;display=verbose/sammy

结论

在本文中,您了解了Angular应用程序中的导航。您已经了解了RouterLinkRouter.navigateRouter.navigateByURL

如果您想了解更多关于Angular的信息,请查看我们的Angular主题页面,了解练习和编程项目。

这篇关于Angular 路由器:使用 RouterLink、Navigate 或 NavigateByUrl 进行导航的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/727512

相关文章

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

linux解压缩 xxx.jar文件进行内部操作过程

《linux解压缩xxx.jar文件进行内部操作过程》:本文主要介绍linux解压缩xxx.jar文件进行内部操作,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、解压文件二、压缩文件总结一、解压文件1、把 xxx.jar 文件放在服务器上,并进入当前目录#

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected