从 URL Angular 获取查询参数 - TypeScript

在前端应用程序中，从 URL 获取查询参数是一个常见的需求。在 Angular 中，我们可以使用 ActivatedRoute 服务来访问 URL 的查询参数。本文将介绍如何使用该服务获取查询参数。

获取查询参数

要从 URL 中获取查询参数，我们需要先订阅 ActivatedRoute 的 queryParams 属性。下面是一个获取 id 查询参数的示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  template: 'My id is {{ id }}.'
})
export class MyComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams
      .subscribe(params => {
        this.id = params['id'];
      });
  }
}

在上面的代码中，我们注入 ActivatedRoute 服务，并在 ngOnInit 生命周期钩子中订阅了 queryParams 属性。该属性是一个可观察对象，每当 URL 中的查询参数发生更改时都会发出一个新值。在订阅时，我们将获取到的 params 对象中的 id 属性赋值给组件的 id 属性。

处理无查询参数的情况

如果 URL 中没有查询参数，params 对象将为空。为了避免在尝试访问空对象属性时出现错误，我们将在查询参数不存在时为 id 属性赋一个默认值：

ngOnInit(): void {
  this.route.queryParams
    .subscribe(params => {
      this.id = params['id'] || 'default';
    });
}

在上面的代码中，我们使用了 JavaScript 的逻辑或运算符 (||)。如果 params['id'] 为 undefined 或 null，则 id 属性将被赋为 'default'。

结论

使用 ActivatedRoute 服务可以轻松地从 Angular 应用程序的 URL 中获取查询参数。通过订阅 queryParams 属性，我们可以即时获取 URL 中的查询参数。此外，我们还可以处理查询参数不存在的情况，以避免出现错误。