javascript - 在组件中使用服务变量更改与从服务订阅事件有什么区别？

Question

我有三个组件。食谱，食谱项目和食谱细节。单击配方项组件中的配方时，将显示该特定配方的配方详细信息（即，配方详细信息组件被激活）。

我有一个共同的服务——食谱服务。我想用它来在所有组件之间进行通信。

方法1：当我从recipe-item 中单击一个recipe 时，我将调用一个函数，该函数将指向recipe service 中的另一个函数，该函数又将变量currentRecipe 标记为从recipe-item 传递的单击的recipe。我将通过 ngOnInit 在 recipe/recipe-details 组件中访问这个 currentRecipe 值以显示详细信息。这种方法会奏效吗？视图会随着服务中变量的变化而变化吗？我对这种方法表示怀疑，因为 ngOnInit 仅在启动组件时进行检查。

方法2：当我从recipe-item 中单击一个recipe 时，我将调用一个函数，该函数将触发在服务中声明的事件发射器，但直接从recipe-item 组件发出currentRecipe。并且，我将从 recipe 和 recipe-detail 组件的 ngOnInit 订阅此事件以显示详细信息。

我是初学者，我对这两种方法感到困惑。我尝试了第一种方法，但没有奏效。第二种方法有效。我不确定为什么第一种方法不起作用。在哪种情况下我应该使用第一种方法，在哪种情况下我应该使用第二种方法？

感谢您的帮助！

标签： javascriptangularangular2-servicesangular7

Answer 1

两种方法都可以，我建议你使用第二种方法，因为你的两个组件都是依赖的并且有关系。

您可以使用 @input() 事件发射器将详细信息传输到子组件。