2017-07-01 80 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