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

Question

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

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

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

Answer 1

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

尝试以下操作

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);
}
}

工作示例：堆叠闪电战