Angular 中如何获取 URL 参数？

在 Angular 应用程序中，获取 URL 参数是一个非常常见的需求。本文将介绍 Angular 中获取 URL 参数的几种方式，并提供示例代码。

通过 ActivatedRoute 获取 URL 参数

Angular 中的 ActivatedRoute 服务可以帮助我们获取路由参数，包括 URL 参数。下面是一个例子：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('userId');
    });
  }
}

在上面的代码中，我们通过 ActivatedRoute 服务获取了路由参数，并将其赋值给了组件的 userId 属性。在 ngOnInit 生命周期钩子函数中，我们使用了 paramMap 属性来订阅路由参数的变化，并通过 get 方法获取了 userId 参数的值。

通过 RouterStateSnapshot 获取 URL 参数

除了 ActivatedRoute 服务，我们还可以使用 RouterStateSnapshot 服务来获取 URL 参数。下面是一个例子：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap, RouterStateSnapshot } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    const snapshot: RouterStateSnapshot = this.router.routerState.snapshot;
    const paramMap: ParamMap = snapshot.root.firstChild.paramMap;

    this.userId = paramMap.get('userId');
  }
}

在上面的代码中，我们使用了 RouterStateSnapshot 服务来获取路由参数。首先，我们获取了当前路由状态的快照，并使用 root 属性获取了根路由状态。然后，我们使用 firstChild 属性获取了第一个子路由状态，并使用 paramMap 属性获取了参数映射。最后，我们使用 get 方法获取了 userId 参数的值。

通过 URLSearchParams 获取 URL 参数

除了上述两种方法，我们还可以使用 URLSearchParams 类来获取 URL 参数。下面是一个例子：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    const searchParams = new URLSearchParams(window.location.search);
    this.userId = searchParams.get('userId');
  }
}

在上面的代码中，我们使用了 URLSearchParams 类来获取 URL 参数。首先，我们创建了一个 URLSearchParams 对象，并传入了 window.location.search 属性，该属性包含了当前 URL 的查询参数部分。然后，我们使用 get 方法获取了 userId 参数的值。

总结

本文介绍了 Angular 中获取 URL 参数的三种方法：通过 ActivatedRoute、RouterStateSnapshot 和 URLSearchParams。无论您选择哪种方法，都可以轻松地获取 URL 参数并将其用于您的应用程序中。希望本文能够对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6550cca1d2f5e1655da9a0ee