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

Question

I have three components. recipe, recipe-item and recipe-details. On clicking on a recipe from recipe-item component, recipe details of that particular recipe is displayed (ie recipe-details component is getting activated).

I have one common service - recipe-service. Which I am thinking to use it for communicating between all the components.

Approach 1: When I click on a recipe from recipe-item, I will call a function which will point to another function in recipe service which in turn will mark a variable currentRecipe as the clicked recipe passed from recipe-item. This currentRecipe value I will access in the recipe/recipe-details components through ngOnInit to display the details. Will this approach work? will the view change as the variable changes in the service? I am doubtful of this approach as the ngOnInit only checks while initiating the component.

Approach 2: When I click on a recipe from recipe-item, I will call a function which will trigger an event emitter that was declared in the service, but emits currentRecipe directly from the recipe-item component. And, I will subscribe to this event from the ngOnInit of recipe and recipe-detail components to display the details.

I am a beginner and I am confused between the two approaches. I tried the first approach which did not work. The second approach works. I am not sure why the first approach did not work. In which scenario I should be using the first approach and in which scenario I should be using the second approach?

Thank you for the help!

Answer 1

Both approaches will work, i would suggest you go with the 2nd Approach as both of your component are dependent and have a relationship.

You could use the @input() event emitter to transfer the details to the child component.