Angular中的ActivatedRoute和Router原理解释

更新时间：2023年04月16日 16:31:17 作者：Data_Adventure

这篇文章主要为大家介绍了Angular中的ActivatedRoute和Router原理解释，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Angular中的ActivatedRoute和Router解释

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

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指令完成路由导航。现在，当用户点击链接时，路由器会根据路径加载相应的组件并在指令的位置动态渲染该组件。

以上就是Angular中的ActivatedRoute和Router原理详解的详细内容，更多关于Angular ActivatedRoute Router的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

深入探究AngularJs之$scope对象（作用域）
本篇文章主要介绍了深入探究AngularJs之$scope对象（作用域），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
使用AngularJS处理单选框和复选框的简单方法
这篇文章主要介绍了使用AngularJS处理单选框和复选框的方法,在AngularJS表单的基础之上编写起来非常简单,需要的朋友可以参考下
2015-06-06
AngularJs Understanding the Model Component
本文主要介绍AngularJs Understanding the Model Component的内容，这里整理了相关资料，并详细讲解了这部分知识，有兴趣的小伙伴可以参考下
2016-09-09
Angular中的ActivatedRoute和Router原理解释
这篇文章主要为大家介绍了Angular中的ActivatedRoute和Router原理解释，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Angularjs的$http异步删除数据详解及实例
这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法，需要的朋友可以参考下
2017-07-07
Angular使用cli生成自定义文件、组件的方法
这篇文章主要介绍了Angular使用cli生成自定义文件、组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
深入浅析AngularJS中的module(模块)
我们所说的模块，是你的AngularJS应用程序的一个组成部分，它可以是一个Controller，也可以是一个Service服务，也可以是一个过滤器(Filter)，也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ，感兴趣的朋友一起学习吧
2016-01-01
AngularJS入门教程之数据绑定用法示例
这篇文章主要介绍了AngularJS之数据绑定用法,结合实例形式分析了AngularJS基于内置指令ng-model实现数据绑定的操作技巧,需要的朋友可以参考下
2016-11-11
AngularJS 路由和模板实例及路由地址简化方法(必看)
下面小编就为大家带来一篇AngularJS 路由和模板实例及路由地址简化方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
将Angular单项目升级为多项目的全过程
有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下
2021-11-11