时间戳

首页 > 解决方案 > 将数组作为查询参数传递并使用 `getAll()` 函数 (Angular) 获取它

angular - 将数组作为查询参数传递并使用 `getAll()` 函数 (Angular) 获取它

问题描述

有人可以说是否可以直接将数组作为查询参数传递并使用getAll()函数检索它。

const queryParams = selectedItems.map(item => item.id);
this.router.navigate(['/item'], {
  relativeTo: this.route,
  queryParams: { item: queryParams }
});

我正在寻找一个例子，但我找不到任何东西。

标签： angulartypescriptrouter

解决方案

您需要ActivatedRoute在接收者组件中使用来获取查询参数，通过queryParamMap该参数返回Observable<ParamMap>包含getAll()您所引用的函数的一个。

尝试以下

item.component.ts

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

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css'],
})
export class ItemComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const queryParam = this.route.snapshot.queryParamMap.get('item');
    console.log('`item` obtained through `get()`:', queryParam);
    const queryParams = this.route.snapshot.queryParamMap.getAll('item');
    console.log('`item` obtained through `getAll()`:', queryParams);
  }
}

工作示例：Stackblitz

推荐阅读