Angular2 中非路由组件如何访问路由参数-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Angular 应用中，路由机制是非常重要的一部分。但是在很多情况下，我们会遇到一些需要在非路由组件中访问路由参数的需求。这种情况下，我们该如何操作呢？

本篇文章将从实际需求出发，详细分析 Angular2 中非路由组件如何访问路由参数的解决方案，旨在为广大前端开发者提供学习以及指导意义。

问题

假设我们现在有一个需求，需要在一个非路由组件（比如一个子组件）中获取该路由当前的参数。在 Angular2 中，这个需求该如何实现？

解决方案

在 Angular2 中，我们可以通过 ActivatedRoute 这个服务来实现在非路由组件中获取当前路由的参数。具体步骤如下：

1. 引入依赖

在我们要使用 ActivatedRoute 服务的组件中，需要先将其引入：

import { ActivatedRoute } from '@angular/router';

2. 注入 ActivatedRoute 服务

在该组件的构造函数中，将 ActivatedRoute 服务注入到其中：

constructor(private route: ActivatedRoute) {}

3. 使用 snapshot 获取参数

在组件中，我们可以通过 ActivatedRoute 的 snapshot 属性来获取当前路由的参数。snapshot 属性是一个 ActivatedRouteSnapshot 类型的对象，其中包含当前路由的详细信息，包括路由参数、路由数据等等。

在这里，我们主要关注路由参数的获取。我们可以通过 snapshot 的 params 属性来获取当前路由的参数信息。具体代码如下：

ngOnInit() {
  const id = this.route.snapshot.params['id'];
  console.log(`当前路由的参数为：${id}`);
}

上面的代码中，我们在 ngOnInit 生命周期中，通过 ActivatedRoute 的 snapshot 属性获取当前路由的参数信息，并将其输出到控制台中。

4. 订阅参数变化

如果你需要在组件中实时获取路由参数的变化，那么上面的代码就不能满足需求了。这种情况下，我们需要使用 params 事件来进行订阅。

具体的做法是，我们可以在组件中调用 ActivatedRoute 的 params 属性，并通过 subscribe 方法来注册一个回调函数。这样，每当路由参数发生变化时，该回调函数就会被执行。

下面是示例代码：

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log(`当前路由的参数为：${params['id']}`);
  });
}

上面的代码中，我们在 ngOnInit 生命周期中订阅了 params 事件，并在回调函数中输出当前路由的参数信息。这样，无论路由参数何时发生变化，我们都能够实时获取最新的参数值。

总结

在 Angular2 中，通过使用 ActivatedRoute 服务，我们可以很方便地在非路由组件中访问当前路由的参数。而通过订阅 params 事件，我们还能够实现对路由参数变化的实时监测。因此，在实际开发中，我们可以根据具体需求选择不同的方式来获取路由参数，从而更加高效地完成开发工作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/651a4ea095b1f8cacd247d42