路由參數傳遞

General
1

請問一下如何做到在兩個component之間做路由的參數傳遞,實際跳頁並隱藏參數資訊

假設路由網址為:home/account
當我click的時候路由要跳轉為:home/account/edit
並且參數要傳遞過去

一般的路由參數傳遞為:home/account/edit?id=1&name=“a”
我想達到的效果為:home/account/edit

官方的路由設定有一個skipLocationChange, 當我設下這個的時候

參數傳遞的確不會出現在URL上面, 但是網址會是:home/account
若此時F5或是點其他頁在返回上一頁時不會停留在edit的畫面,並非我預期的效果

請問除了將參數記錄在session或localStorage外,還有其他解決方式嗎?

2

因為沒有畫面和程式碼 我初步推測應該是 父子組件傳輸的問題吧?
如果是這樣 那可以在 子組件(edit) @input() 父組件(account) 使用 html 模板 edit 時再把值丟過去

參數除了可以保存在 localStorage 也可以透過 Rx中的 subject 特性保留
在 Angular 裡面沒有 session 的東西 那是伺服器才有的東西吧 :joy:

建議把程式碼和需求稍微說明一下 這問題我看了很久 真的不懂…要怎麼幫忙

3

感謝您的回覆,在此把程式碼PO上

在account的HTML:
<button type=“button” (click)=“edit(‘Edit’,item)”>

當 點下按鈕 觸發 account的component (edit function)
edit(motion, aPost){
data = {
Action: motion,
Text: JSON.stringify(aPost.Text),
top:JSON.stringify(aPost.top),
id: aPost.id,
levelForm: JSON.stringify(aPost.levelForm),
online_time: aPost.online_time,
offline_time: aPost.offline_time,
online: aPost.online,
online_id: aPost.online_id,
}

    this._router.navigate(['./edit'], {
      queryParams:data,//傳送資料
      relativeTo: this._route,//使用相對路徑
      // skipLocationChange: true,//路由參數隱藏
    });

}
透過account的routing導頁至edit頁面
const routes: Routes = [
{ path: ‘edit’, component: EditComponent },
];

edit的component:
//取得傳遞參數
this.sub = this.route.queryParams.subscribe(params => {
this.Action = params[‘Action’];
});

此時在edit的頁面上的url為 home/account/edit?Action=Edit&Text=%7B"…
參數都寫在URL上面了

若我把上述的edit 的 skipLocationChange: true, 打開的話
當我click 至edit畫面時
網址為:home/account
後面的/edit 不見了,但是參數一樣有傳過去
若此時我按F5,則會回到account頁面,不會轉到account/edit的頁面,
我想要F5時還能夠停留在account/edit畫面,並且參數也能夠存在

我也有想過子組件與父組件傳輸
但這樣在account 的HTML上面寫 <Edit [post]=“post”>
的方式為一進頁面就載入edit的頁面,而我實際上的功能他是一個button鈕,
點選時才載入過去

不知道能不能路由導頁,同時又能夠子組件父組件利用inputs、outputs 傳遞參數

4

從你的程式碼和描述中 要解決你的問題
目前看來必須使用 DataService 作法或者導入 Redux
因為 Redux 是另一門學問 就先以 DataService 作為解決辦法吧

參考
https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

在路由中帶這麼多資訊 感覺很怪就是了 不建議這麼做
因為看不到你的畫面 比較難想像為什麼要這設計 總覺得毛毛的:joy:

5

感謝您,我研究看看
會這樣做是因為一開的時候再account 就把資料撈完了,所以進edit的時候就不再進一次資料庫,
這樣的話就要把我要的資料傳過去,所以資訊會很多 :joy:

6

從 Account 到 Edit 這是畫面上的切換嗎?
既然都在 Account 組件拿到資料了 怎麼不考慮在 Account 就提供編輯功能?
盡可能減少攜帶大量資料在組件中切換吧! :joy:

7

對唷~是畫面切換,因為要考慮到RWD,所以在Account上面就沒列出全部的List ,然後 會有一個Edit的按鈕
按了之後才會跳到另一頁,原本有打算Dialog的方式呈現, 但若在手機端的話 看起來顯示效果不佳,因此改成頁面切換 ,感謝大大教學~~~~XD

8

可以考慮自己做一支Service專門來處理

只要使用service.setParams(‘key’, data);

另一頁再使用service.getParams(‘key’)即可。

至於資料儲存方式，如果畫面重整還需要在的話，

就考慮是用session storage或是local storage吧！