如何在 router.navigate() 中将复杂对象作为 Angular2 中的查询参数传递

Question

>我已经在 Angular2 中的辅助路由的帮助下配置了路由器配置。所以我需要传递一个复杂对象作为查询参数。代码示例如下：

let navigationExtras: NavigationExtras = {
  queryParams: {
    "person": JSON.stringify({
       "firstname": "Mark",
       "lastname": "Antony",
       "address": {
          "city": "San Francisco",
          "state": "California"
        }
     })
  }
}
this.router.navigate([{outlets: {aux: 'user'}}], navigationExtras)

。在接收端：

this.route.queryParams.subscribe(params => {
  this.firsname = params["firstname"];
  this.lastname = params["lastname"];
});

导航时，URL 已分离为字符串(编码(。所以网址中出现了很多通配符。我想按如下方式格式化网址：

localhost:4200/main/(aux:user)?firstname=Mark&lastname=Antony&city=San Francisco&state=California

有没有办法做到这一点？

Answer 1

我认为将

整个对象作为QueryString传递不是一个好主意。出于安全原因和使 URL 不太有用。我的建议是使用 ID 和服务来获取其他组件中的数据以检索数据或使用表单数据而不是查询字符串。但是如果你想使用QueryString，你可以使用：

JSON.parse(text[， reviver](

JSON.stringify(value[， replacer[， space]](

您的要求是定制的，并根据您的项目量身定制...您可以覆盖解析和字符串化方法以您喜欢的方式构建字符串，只要您遵循 URL 规则，您就不会有任何问题，例如 => (aux：user(括号不支持 url 格式。

JSON.stringfy=(data){
  //foreach property
  //add format and for each nested property look for it's nested properties
  //if your object has more nested property you can use recursive functions.
  //you can use variable to detecting level or making object flat.
}
JSON.parse=()=>{
   ...
}