如何通过routerLink传递查询参数？

routerLink是Angular中用于在应用程序中浏览不同视图之间的链接指令。它可以传递路由参数和查询参数。本文将重点解释如何通过routerLink传递查询参数。

什么是查询参数？

在URL中，查询参数是在问号(?)后面的键值对，它们用&分隔。查询参数经常用于过滤、分页、排序或搜索数据。例如：

http://localhost:4200/products?category=books&price=10-20

在此示例URL中，category和price是查询参数名，它们的值分别为books和10-20。

如何传递查询参数？

要在Angular中传递查询参数，必须将它们添加到routerLink中。以下是routerLink的语法：

<a routerLink="/path" [queryParams]="{key: value}">Link</a>

在上面的语法中，[queryParams]是传递查询参数的输入属性，key和value是查询参数的名称和值。您可以使用多个键值对传递多个查询参数。

以下是传递多个查询参数的语法：

<a routerLink="/path" [queryParams]="{key1: value1, key2: value2}">Link</a>

当用户单击链接时，Angular路由器会导航到指定的路径，并将查询参数添加到URL中。您可以使用ActivatedRoute服务访问查询参数。

以下是如何访问查询参数的语法：

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

@Component({...})
export class MyComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const category = this.route.snapshot.queryParamMap.get('category');
    const price = this.route.snapshot.queryParamMap.get('price');
    console.log(category); // 输出 "books"
    console.log(price); // 输出 "10-20"
  }
}

在上面的语法中，ActivatedRoute服务用于获取查询参数。您可以使用queryParamMap属性从快照中获取查询参数的值。