如何使用angular 4中的路由将数组作为参数传递

时间:2018-06-08 10:07:10

标签: json angular angular-routing

我正在研究一个角度项目我希望将一个数组对象作为参数传递到另一个页面,通过路由我的函数如下

  addItem(
itemName: string,
eventId: string,
itemPicture: string = null
): PromiseLike<any> {
    return this.activityListRef
      .child(`${eventId}/itemList`)
      .push({ itemName })
      .then(newItem => {
        this.activityListRef.child(eventId).transaction(event => {
          return event;
        });
        if (itemPicture != null) {
          return firebase
            .storage()
            .ref(`/item/${newItem.key}/profilePicture.png`)
            .putString(itemPicture, 'base64', { contentType: 'image/png' })
            .then(savedPicture => {
            console.log(savedPicture.metadata);
              this.activityListRef
                .child(`${eventId}/itemList/${newItem.key}/profilePicture`)
                .set(savedPicture.downloadURL);
            });
        }
      });
  }

获取数据如下

Goto(item)
{

    console.log(item.numtopics);
    this.router.navigate(['/numbersystem'],  { queryParams: item.numtopics});

} 

但在控制台我得到的数据是这样的

constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe( param => {


        console.log(param);
    });

    }

我没有正确获取数组数据

任何帮助。 谢谢!!

2 个答案:

答案 0 :(得分:0)

如果你想获得这个传递的数组,你应该使用:

console.log(param.numtopics)

或者您也可以像这样传递数组:

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

然后你可以像尝试一样获得这个数组:

console.log(param)

答案 1 :(得分:0)

请参阅官方documentation,如何传递queryParams。

您获取{0: "[object Object]", 1: "[object Object]", 2: "[object Object]"}等数据的原因是因为它是一个对象。

尝试将JSON.stringify(item.numtopics)传递给queryparams。这会将一个字符串传递给queryParams。您还可以提及查询的 NAME (参考文档)。对于exapmle:

https://www.yourdomain.com/search?NAME=stringifiedString

在传递字符串化数组之前,您可能希望加密数据,以便使用某种加密算法。此后,在您检索参数的组件中,您可以再次使用JSON.parse(paramsData)从字符串中返回数组。

如果您使用过加密,则应首先解密,然后使用JSON.parse()