如何在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已serailized作爲字符串（編碼）。所以有很多通配符出現在網址中。我想格式URL如下：

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

有沒有辦法做到這一點？

Answer 1

我不認爲將整個對象作爲QueryString傳遞是個好主意。 出於安全原因，因爲使URL不那麼有用。 我的建議是使用ID和服務來獲取其他組件中的數據以檢索數據或使用表單數據而不是查詢字符串。 但是，如果你想使用查詢字符串，你可以使用：

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