Angular中的ActivatedRoute和Router

Angular中的ActivatedRoute和Router解释

在Angular中,ActivatedRouteRouter是两个核心的路由服务。他们都提供可以用来检查和操作当前页面路由信息的方法和属性。

ActivatedRoute

ActivatedRoute是一个保存关于当前路由状态(如路由参数、查询参数以及其他数据)的对象。 它可以让开发人员从路由器中访问路由参数和查询参数。

ActivatedRoute是路由事件数据的载体。 这包括在导航期间收集的静态和动态段以及查询参数、Fragment等等。

例如,对于这个路由:

{ path: 'product/:id', component: ProductDetailComponent }

通过获取ActivatedRoute,我们可以轻松地访问id值:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';@Component({selector: 'app-product-detail',template: 'Product Details Component'
})export class ProductDetailComponent implements OnInit {constructor(private route: ActivatedRoute) {}ngOnInit() {const id = +this.route.snapshot.paramMap.get('id');// ...}
}

在上面的代码示例中,ActivatedRoute通过注入该服务作为构造函数的参数而获取。接下来,我们只需使用快照对象(即this.route.snapshot)就可以快速访问路由参数。要获取参数的特定值,可以使用get方法访问params属性,该方法采用一个字符串参数并返回一个字符串:

const id = +this.route.snapshot.paramMap.get('id');

这里的加号意味着我们将结果转换为数字类型。

另一种访问路由参数的方法是通过订阅paramMap可观察值。subscribe`方法定义给observable带来副作用,就像任何** RxJS **observable一样:

this.route.paramMap.subscribe(params => {const id = +params.get('id');// ...
});

这种方式允许动态更改URL。(你的组件不需要重新创建。)

Router

Router通过向前和向后导航和路由装置提供了一种明显且简单的编程API,同时仍然保留完全配置的强大能力。

路由器是一个抽象的概念,它用于选择输入URL,并将其转换为经过测试的规则来获取特定组件。 在Angular中,路由器是NgModule中的引导项之一。 路由器设置可能看起来非常困难,但是一旦了解了基本情况,它们就会感到自然。

基本导航

首先,我们根据常规用法配置Routes数组:

// app-routing.module.ts file
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'products', component: ProductListComponent },{ path: 'products/:id', component: ProductDetailComponent }
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

我们设定了三个路由:空路径(主页),产品列表和特定ID的产品。 每个路径都与对应的组件相关联。

然后,我们在模板或组件类中安排具有相应路由声明的链接:

<!-- home.component.html -->
<a routerLink="/">Home</a>
<a routerLink="/products">Product List</a><!-- product-list.component.html -->
<ul><li *ngFor="let product of products"><a [routerLink]="['/products', product.id]">{{ product.name }}</a></li>
</ul><!-- product-detail.component.html -->
<h2>Product Detail</h2>
<p>{{ product }}</p>

在上面的所有代码示例中,我们使用了routerLink指令完成路由导航。现在,当用户点击链接时,路由器会根据路径加载相应的组件并在指令的位置动态渲染该组件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/39197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下grep通配容易混淆的地方

先上一张图: 我希望找到某个版本为8的一个libXXX.8XXX.so ,那么应该怎么写呢? 先看这种写法对不对: 是不是结果出乎你的意料之外? 那么我们来看一下规则: 这里的 "*" 表示匹配前一个字符的零个或多个 于是我们就不难理解了: lib*8*.so 表示 包…

医疗PACS源码,支持三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜

C/S架构的PACS系统源码&#xff0c;PACS主要进行病人信息和影像的获取、处理、存储、调阅、检索、管理&#xff0c;并通过网络向全院提供病人检查影像及诊断报告&#xff1b;各影像科室之间共享不同设备的病人检查影像及诊断报告;在诊断工作站上&#xff0c;调阅HIS中病人的其它…

拒绝摆烂!C语言练习打卡第二天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4dd;…

P1304 哥德巴赫猜想

题目描述 输入一个偶数 N N N&#xff0c;验证 4 ∼ N 4\sim N 4∼N 所有偶数是否符合哥德巴赫猜想&#xff1a;任一大于 2 2 2 的偶数都可写成两个质数之和。如果一个数不止一种分法&#xff0c;则输出第一个加数相比其他分法最小的方案。例如 10 10 10&#xff0c; 10 …

Springboot写单元测试

导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><exclusions><exclusion><groupId>org.junit.vintage</groupId><artifactId>junit-vintag…

django实现悲观锁乐观锁

前期准备 # 线上卖图书-图书表 图书名字&#xff0c;图书价格&#xff0c;库存字段-订单表&#xff1a; 订单id&#xff0c;订单名字# 表准备class Book(models.Model):name models.CharField(max_length32)price models.IntegerField() #count models.SmallIntegerField…

Python实时监控键盘的输入并打印出来

要实现Python实时监控键盘的输入并打印出来&#xff0c;可以使用pynput模块。 首先&#xff0c;需要安装pynput模块&#xff1a; pip install pynput 然后&#xff0c;可以编写以下代码来实现实时监控键盘输入并打印出来的功能&#xff1a; from pynput import keyboard# 定…

【Unity每日一记】方位辨别—向量的叉乘点乘结合

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

grafana 的 ws websocket 连接不上的解决方式

使用了多层的代理方式&#xff0c;一层没有此问题 错误 WebSocket connection to ‘wss://ip地址/grafana01/api/live/ws’ failed: 日志报错 msg“Request Completed” methodGET path/api/live/ws status403 解决方式 # allowed_origins is a comma-separated list of o…

Flutter:简单搞一个内容高亮

内容高亮并不陌生&#xff0c;特别是在搜索内容页面&#xff0c;可以说四处可见&#xff0c;就拿掘金这个应用而言&#xff0c;针对某一个关键字&#xff0c;我们搜索之后&#xff0c;与关键字相同的内容&#xff0c;则会高亮展示&#xff0c;如下图所示&#xff1a; 如上的效果…

【Linux操作系统】举例解释Linux系统编程中文件io常用的函数

在Linux系统编程中&#xff0c;文件IO操作是非常常见和重要的操作之一。通过文件IO操作&#xff0c;我们可以打开、读取、写入和关闭文件&#xff0c;对文件进行定位、复制、删除和重命名等操作。本篇博客将介绍一些常用的文件IO操作函数。 文章目录 1. open()1.1 原型、参数及…

读书笔记 |【项目思维与管理】➾ 顺势而动

读书笔记 |【项目思维与管理】➾ 顺势而动 一、企业步入“终结者时代”二、过去成功的经验也许是最可怕的三、做好非重复性的事四、适应客户是出发点五、向知识型企业转变六、速度是决胜条件 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; …

docker私有仓库harbor

一、安装docker-compose yum install docker-compose -y 二、下载harbor安装包 tar -xf harbor-online-installer-v2.1.0.tgz cp harbor.yml.tmpl harbor.yml 三、修改harbor配置 [rootharbor ~]# vim harbor.ymlhostname: "修改为本机ip" harboradminpassword:…

每天一道leetcode:1218. 最长定差子序列(动态规划中等)

今日份题目&#xff1a; 给你一个整数数组 arr 和一个整数 difference&#xff0c;请你找出并返回 arr 中最长等差子序列的长度&#xff0c;该子序列中相邻元素之间的差等于 difference 。 子序列 是指在不改变其余元素顺序的情况下&#xff0c;通过删除一些元素或不删除任何…

iTOP-i.MX8M开发板添加USB网络设备驱动

选中支持 USB 网络设备驱动&#xff0c;如下图所示&#xff1a; [*] Device Drivers→ *- Network device support → USB Network Adapters→ {*} Multi-purpose USB Networking Framework 将光标移动到 save 保存&#xff0c;如下图所示&#xff1a; 保存到 arch/arm64/c…

树形动态规划——树形dp

树形动态规划 树形 d p dp dp算法是一种用于解决树相关问题的动态规划算法。它把树的问题分解成了子问题&#xff0c;并通过子问题的求解来构建整个问题的解。 当我们面对一棵树的问题时&#xff0c;我们可以使用树形 d p dp dp来解决。这种算法的基本思想是通过定义一个用于…

C语言入门 Day_5 四则运算

目录 前言 1.四则运算 2.其他运算 3.易错点 4.思维导图 前言 图为世界上第一台通用计算机ENIAC,于1946年2月14日在美国宾夕法尼亚大学诞生。发明人是美国人莫克利&#xff08;JohnW.Mauchly&#xff09;和艾克特&#xff08;J.PresperEckert&#xff09;。 计算机的最开始…

代码随想录第四十四天

代码随想录第四十四天 Leetcode 518. 零钱兑换 IILeetcode 377. 组合总和 Ⅳ Leetcode 518. 零钱兑换 II 题目链接: 零钱兑换 II 自己的思路:想不到&#xff0c;忘记这个递推公式了&#xff01;&#xff01;&#xff01;而且初始化也要值得注意&#xff01; 正确思路:由于这个…

js数组学习(ES6+)

文章目录 js(ES6)数组学习1.Array.prototype.forEach(fn)2.Array.prototype.map(fn)3.Array.prototype.filter(fn)4.Array.prototype.reduce(fn)5.Array.prototype.some(fn) every6.Array.prototype.find(fn)7.Array.prototype.includes(item) js(ES6)数组学习 1.Array.protot…