在路由中传递对象[重复]

Posted 2023-02-22

【中文标题】在路由中传递对象[重复]

【英文标题】：Passing objects in routing [duplicate]

【发布时间】：2016-08-27 22:54:50

【问题描述】：

我在 Angular2 中有一个组件托管用户表 (userTableComponnent) 和 userDetails 的另一个组件。单击用户表中的一行后，我想路由到 userDetails。一种实现是仅传递 userId，因此在 userDetails 中，我使用另一个 http get 获取用户的详细信息。但是，这是多余的，因为我在 userTableComponent 中获取了所有用户信息。所以我真正需要的是将用户对象从 userTableComponent 传递给 userDetails。知道如何通过路由来实现吗？

【参考方案1】：

您可以创建一个 SessionService 类并通过依赖注入将其传递给您的应用程序。

选择用户后，您可以将相关数据附加到通过 DI 注入的 SessionService 实例，并在 userDetails 组件中检索它。

希望对你有帮助

【讨论】：

感谢您的回复。看起来不错

你不觉得共享服务在用户刷新页面时可能会丢失数据吗？

如果刷新意味着使用 F5 键，是的，因为您正在重新加载应用程序，所以一切都会丢失，除非您使用本地存储。考虑到这些是单页应用程序，这意味着它们在加载到浏览器的那一刻就会重新开始。

您可以通过使用使用 APP_INITIALIZER 令牌的数据服务在 F5 刷新后存活，例如我使用此类服务​​为应用程序加载“全局”数据，因此大多数页面都可以在重新加载后继续存在。但是，如果您有一个页面在幕后传递数据，那么您可能会让 F5 “破坏”您的应用程序弹性。除了在 APP_INITIALIZER 中加载数据外，您还可以使用解析器，或者在 URL 中，您可以将 ID 作为查询参数传递，并让给定页面在 onInit 方法中按 ID 加载必要的数据。

***.com/a/36835156/185123 在这里查看更新

【参考方案2】：

通过路由传递对象是非常有限的。使用服务是更好的选择。如果您通过父组件提供服务实例，那么相同的实例会被注入到父组件和子组件中，并且您可以立即获得共享数据。

另见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

在 RC.4 中还重新引入了用于路由的 data How do I pass data in Angular 2 components while using Routing?

【讨论】：

谢谢。该链接信息量很大

***.com/a/36835156/185123 在此处查看更新