Angular2 RC1:将数据传递给组件

时间:2016-05-22 16:54:39

标签: angularjs routing routes angular

我想,之前已经讨论过这个问题,对于新的RC路由器和不推荐的路由器都是如此。最受欢迎的解决方案似乎是使用服务将数据传递到路由器插座激活的组件。

然而,我越是想到它,我就越发现自己处于一种简陋,可观察和极端的状态。请考虑以下情况:

这样的路线被称为:" / car / 123 / motor / 4 / sparkcoil"

表示:获取ID为4的电机的火花线圈数据,而该电机又是ID为123的汽车的一部分。

所以,有3个组件有嵌套路由," car"组件," motor"元件和"火花线圈"零件。第一个组件有一个路由器插座,子组件在其中呈现。到目前为止,并不太难。

让我们做一些假设:

1) 在" motor"组件我需要访问汽车数据,并在"火花线圈"组件,我需要访问汽车数据和电机数据。

2)由于数据量巨大,获取汽车的后端调用不包含所有可用电机类型的数据。因此,必须在单独的后端调用中获取汽车,电机和火花线圈数据。

激活的第一个组件是路由" / car / 123"是汽车的组成部分。它有一个注入的服务,它使后端调用并返回组件订阅的Observable。

然后,第二条路线" / motor / 4"被激活了。我需要知道父组件提取的汽车对象。之后," / sparkcoil"组件被激活,这也需要了解电机和汽车。显然现在没有办法让@Input装饰器传递它。经常提出的建议是:使用服务。好吧,所以我将服务X注入汽车和电机组件。痛苦来了。我没有令人满意的解决方案来设计服务,却没有发现自己处于同时发生的情况或观察中。

想法1:

汽车和电机组件调用名为fetchMotor(id)和fetchCar(id)的服务上的函数,该函数又触发motorFetchedEventEmitter和carFetchedEventEmitter的next()方法。电机和sparkcoil组件订阅所有EventEmitter,以获取有关何时获取后端数据的信息。但是,我不知道组件是否在之前订阅了EventEmitter ,或者在之后订阅了。如果之前,一切都很好,如果之后,我需要重播" emittals(参见Observable.replay(...))。由于服务及其EventEmitter仅实例化一次,因此重放Observable意味着我可能会收到很多(不相关的)事件。

想法2:

我会反过来这样做。汽车和电动机部件保持空转,直到调用火花线圈部件。该组件解析所有路由段,执行相应的后端调用,并通过服务的EventEmitters将后端响应传播到" car"和" motor"零件。我承认,就RC1的新组件路由而言,这种方法相当适得其反。

考虑到生命周期的钩子,可能会有更好的解决方案。根据文档,OnActivate界面(见https://angular.io/docs/js/latest/api/router/OnActivate-interface.html) 说,当onActivate返回一个承诺时,所有子组件都不会被激活,直到承诺结算。我不认为路由组件有类似的功能。

有没有人有一个如何尽可能优雅地解决这个问题的想法。

提前感谢您的想法。我需要一杯咖啡! : -

1 个答案:

答案 0 :(得分:0)

您不应在服务中使用EventEmitter。这在很长一段时间内都很常见,但EventEmitter只应用于@Output()组件。

我认为整个问题只是关于如何使用observable和服务的设计问题(我不是说它是一个容易解决的问题)。

使用BehaviorService可能是修复时间问题的选项,其中服务订阅了 这些值后发现的可观察量。使用BehaviorService,新订户立即获得最后一次传递的值。

您的问题不包含足够的信息以获取更详细的建议,而且对于StackOverflow来说似乎有点过于宽泛。如果您可以将问题分解为单个问题并为这些问题创建新问题,则可能更容易就如何解决问题提出具体建议。