Angular 的查询参数 (Query Parameters) 是如何使用的？

推荐答案

在 Angular 中，查询参数（Query Parameters）可以通过 ActivatedRoute 服务来获取和操作。以下是使用查询参数的基本步骤：

1. 导入 ActivatedRoute 服务：在组件中导入 ActivatedRoute 服务。
2. 订阅查询参数：通过 ActivatedRoute 的 queryParams 属性来订阅查询参数的变化。
3. 使用查询参数：在订阅的回调函数中使用查询参数。

// www.javascriptcn.com code example
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-example',
  template: `<p>Query Parameter: {{ queryParam }}</p>`
})
export class ExampleComponent implements OnInit {
  queryParam: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.queryParam = params['paramName'];
    });
  }
}

本题详细解读

1. 导入 ActivatedRoute 服务

ActivatedRoute 是 Angular 提供的一个服务，用于访问与当前路由相关的信息，包括路径参数、查询参数等。首先需要在组件中导入 ActivatedRoute。

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

2. 订阅查询参数

在组件的 ngOnInit 生命周期钩子中，通过 ActivatedRoute 的 queryParams 属性来订阅查询参数的变化。queryParams 是一个 Observable，因此可以使用 subscribe 方法来监听参数的变化。

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.queryParam = params['paramName'];
  });
}

3. 使用查询参数

在订阅的回调函数中，可以通过 params 对象来访问查询参数。params 是一个键值对对象，键是查询参数的名称，值是查询参数的值。

this.queryParam = params['paramName'];

4. 在模板中使用查询参数

在模板中，可以通过插值表达式或其他方式将查询参数的值显示出来。

<p>Query Parameter: {{ queryParam }}</p>

5. 设置查询参数

除了获取查询参数，还可以通过 Router 服务的 navigate 方法来设置查询参数。

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

constructor(private router: Router) {}

navigateWithQueryParams() {
  this.router.navigate(['/example'], { queryParams: { paramName: 'value' } });
}

6. 保留当前查询参数

在导航时，可以使用 queryParamsHandling 选项来保留当前的查询参数。

this.router.navigate(['/example'], { queryParamsHandling: 'merge' });

7. 清除查询参数

如果需要清除查询参数，可以将 queryParams 设置为 null。

this.router.navigate(['/example'], { queryParams: {} });

通过这些步骤，你可以在 Angular 应用中有效地使用查询参数来实现路由导航和参数传递。