如何在 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 已序列化为字符串（已编码）。所以在 url 中出现了那么多通配符。我想格式化 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]])

您的要求是为您的项目定制的... 您可以重写 parse 和 stringify 方法以按照您喜欢的方式构建字符串，只要您遵循 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=()=>{
   ...
}

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

How to pass complex objects within router.navigate() as a query parameter in Angular2

query-parameters

angular2-routing