Angular 2+：如何访问路由器出口之外的活动路由

路由器

Angular 2+：访问路由器出口之外的活动路由

Angular框架提供了强大的路由器模块，用于处理应用程序中的导航和视图管理。然而，在某些情况下，我们可能需要访问路由器出口之外的活动路由，以执行特定的任务或获取信息。本文将介绍如何在Angular 2+应用程序中实现这一目标，并提供一个简单的案例代码。

获取活动路由

要访问当前活动路由，我们可以使用Angular的ActivatedRoute服务。该服务提供了有关当前路由的信息，包括参数、查询参数等。以下是一个简单的例子，演示如何在组件中使用ActivatedRoute来获取当前活动路由的信息：

typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-my-component',
  template: <code>
    <div>
      <h2>当前路由信息</h2>
      
路由参数：{{ routeParams }}
      
<img src="https://img.izhida.com/topic/1e35bcba2dba1089c7bd0805d4517c8f.jpg" alt="typescript"><br>typescript
查询参数：{{ queryParams }}
    </div>
  </code>,
})
export class MyComponent implements OnInit {
  routeParams: string;
  queryParams: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    // 获取路由参数
    this.route.params.subscribe(params => {
      this.routeParams = JSON.stringify(params);
    });
    // 获取查询参数
    this.route.queryParams.subscribe(queryParams => {
      this.queryParams = JSON.stringify(queryParams);
    });
  }
}

在上述代码中，我们通过订阅ActivatedRoute的params和queryParams属性来获取路由参数和查询参数。这样，我们就可以在组件中使用这些信息了。

访问路由器出口之外的活动路由

有时，我们可能需要在组件之外的地方获取当前活动路由的信息。这可能涉及到服务或其他模块的使用。为了实现这一目标，我们可以创建一个自定义服务，该服务依赖于ActivatedRoute来获取当前路由的信息。

typescript
import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Injectable({
  providedIn: 'root',
})
export class CurrentRouteService {
  private routeParams: any;
  private queryParams: any;
  constructor(private route: ActivatedRoute) {
    // 获取路由参数
    this.route.params.subscribe(params => {
      this.routeParams = params;
    });
    // 获取查询参数
    this.route.queryParams.subscribe(queryParams => {
      this.queryParams = queryParams;
    });
  }
  getcurrentRouteParams() {
    return this.routeParams;
  }
  getcurrentQueryParams() {
    return this.queryParams;
  }
}

在上述代码中，我们创建了一个名为CurrentRouteService的服务，它在构造函数中依赖于ActivatedRoute。然后，我们通过订阅params和queryParams属性来获取路由参数和查询参数，并将它们存储在服务的私有变量中。最后，我们提供了两个公共方法，允许其他部分的应用程序获取当前路由的参数和查询参数。

在本文中，我们介绍了如何在Angular 2+应用程序中访问路由器出口之外的活动路由。通过使用ActivatedRoute服务，我们可以轻松地获取当前路由的信息，并且通过创建一个自定义服务，我们可以在组件之外的地方访问这些信息。这种方法提供了灵活性，使我们能够更好地组织和管理应用程序中的路由相关功能。希望这篇文章对你在Angular应用程序中处理路由时有所帮助！