如何在router.navigate（）中传递复杂对象作为Angular2中的查询参数(How to pass complex objects within router.navigate() as

如何在router.navigate（）中传递复杂对象作为Angular2中的查询参数(How to pass complex objects within router.navigate() as a query parameter in Angular2)

我已经在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如下：

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

有没有办法做到这一点？

I have configured router configuration with the help of Auxiliary routing in Angular2. So I need to pass a complex object as a query parameter. Code example as follows :

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

... At the receiving end :

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

When navigating, URL has serailized as a string(encoded). So there were so many wild cards appear in the url. I want to format URL as follows:

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

Is there a way to do this?

最满意答案

我不认为将整个对象作为QueryString传递是个好主意。 出于安全原因以及因为URL不太有用。 我的建议是使用id和service来获取其他组件中的数据以检索数据或使用form-data而不是query-string。 但是如果你想使用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=()=>{ ... }

I don't think that it is a good idea to pass the whole object as QueryString. For security reason and because making URL less useful. my recommendation is using id and service to get data in other components to retrieve data or use form-data instead of query-string. But if you want to use QueryString you can use:

JSON.parse(text[, reviver])

JSON.stringify(value[, replacer[, space]])

Your request is custom and tailored to your project... you can override parse and stringify methods to build string the way you like as long as you following URL rules you will not have any problem like=> (aux:user) Parentheses is not supporting by url format.

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=()=>{ ... }