Question

我正在尝试通过activeroute传递对象数组。当我将其传递到下一页时，会显示[object Object]。我在Stackoverflow上看到了一个问题，他们使用JSON.stringify，但这对我不起作用。还是使用应用程序提供商代替queryparams更好。

发送数据的页面的交易记录

criteriaList: ShipmentLookupCriteria[] = [];

    navigateTo() {
        const navigationExtras: NavigationExtras = {
          queryParams: {
            criteriaList: this.criteriaList
          }
        };

        this.router.navigate(['/lookup/results'], navigationExtras);
    }

接收数据的页面的

TS

 this.sub = this.route.queryParams.subscribe(params => {
      console.log(params.criteriaList);
 });

ShipmentLookUpCriteria模型

import { EquipReferenceTuple } from './equip-reference-tuple.model';
export class ShipmentLookupCriteria {
  terminal: string;
  equipReferenceList: EquipReferenceTuple[];
  constructor(terminal: string, equipReferenceList: EquipReferenceTuple[]) {
    this.terminal = terminal;
    this.equipReferenceList = equipReferenceList;
  }
}

更新我决定从简单的事情开始。因此，我创建了一个包含伪数据的对象数组。

navigateTo() {
    const navigationExtras: NavigationExtras = {
      queryParams: {
        criteriaList: [{ name: 1, age: 1 }, { name: 2, age: 2 }]
      }
    };

    this.router.navigate(['lookup/results'], navigationExtras);
  }

页面接收参数

 this.route.queryParams.subscribe(params => {
      console.log(params.criteriaList[0]);
 });

RETURNS = [object Object]如果再次执行JSON.stringify，它将显示为字符串"[object Object]"。如果我这样做，params.criteriaList[0].name返回undefined

Answer 1

您可以简单地通过

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

并使用

进行访问

this.sub = this.route.snapshot.queryParamMap.get('criteriaList');

用activeroute传递对象数组的最佳方法-Angular

1 个答案: