2017-07-01 49 views
19

反正有沒有用router.navigate作爲參數發送數據? 我的意思是,像this例如,你可以看到的路線有一個數據參數,但是這樣做是不工作:用route.navigate發送數據到Angular 2

this.router.navigate(["heroes"], {some-data: "othrData"}) 

,因爲一些數據是不是一個有效的參數。我怎樣才能做到這一點?我不想用queryParams發送參數。

+0

我認爲它應該與AngularJS中的其他方式類似,我們可以像$ state.go('heroes',{some-data:「otherData」 }) – Motomine

+0

3個簡單的方法通過路由共享數據--http://www.angulartutorial.net/2017/12/3-simple-ways-to-share-data-through.html – Prashobh

回答

78

有很多困惑關於這個話題,因爲有很多不同的方式來做到這一點。

1)必需的路由參數:

enter image description here

2)路徑中的可選參數:

enter image description here

3)路線查詢參數:

enter image description here

4)您可以使用服務將數據從一個組件傳遞到另一個組件,而根本不使用路由參數。

舉個例子看看:https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

我有這個這裏plunker:https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

// Code 
+0

謝謝你的回答! 2)和3)有什麼區別?因爲兩者最終都會在URL中添加「?parameter =」。你能給我一個4)的例子嗎?我無法弄清楚如何去做。 – Motomine

+0

我通過回答更新以顯示不同的URL,並提供指向博客文章和plunker的鏈接,以瞭解如何通過服務傳遞數據。該URL與可選和查詢參數不同,如上所示。 Plus查詢參數可以保留在路由中。 – DeborahK

+0

我也有一個關於路由的Pluralsight課程,涵蓋了所有這些內容:https://app.pluralsight.com/library/courses/angular-routing/table-of-contents如果您有興趣,您可以註冊一個免費的星期在更多的信息。 – DeborahK

1

你應該在路由定義中使用的參數如下

​​

你應該得到的參數的數據如下,

this.sub = this.route.params.subscribe(params => console.log(params)) 

Updated Plunker

+1

但我可以做到這一點,而不顯示URL上的參數值? – Motomine

+0

檢查此[答案](https://stackoverflow.com/questions/41039870/passing-data-through-angular2-router)。你在找它還是需要更多幫助? – Aravind

+0

我無法找到解決方案,因爲所有的例子都使用查詢參數,我想避免使用該網址的那個 – Motomine

2

您可以使用此。 Angular2 +/4/5 - 使用數據導航 https://github.com/Hipparch/Angular2-navigate-with-data

+0

雖然這個鏈接可能回答這個問題,但最好在這裏包含答案的重要部分,並提供供參考的鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效。 - [來自評論](/ review/low-quality-posts/18942205) – mlinth