将组件作为输入传递

Question

Im trying to build a generic timeline component that accepts an array of items. a timeline's item is an object that contain icon, content and an extendable content.

When a timeline's item is clicked the extendable content is extended with a style and a logic of it's on, in other words, when item is clicked a new component is open in the timeline's item position.

I dont have any good ideas so far, except from passing the extendable content as a component.

Is there a better solution?

Answer 1

In my experience, you have three options to complete your objective.

Option 1): Pass data as @Input()

You can pass the object data as @Input() of the Child Component: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

Option 2): Share Data through a Service with Subject/BehaviorSubject

You can create a Services that contains a property with type Subject/BehaviorSubject, then the Parent Component set the data to share in the property of the service and finally the Child Component access to that data in the property of the service:

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Option 3): Set the data in the Child Component with @ViewChild(): https://angular.io/guide/component-interaction#parent-calls-an-viewchild

For your case, I recommend you to share data with the @Input() property in the Child Component (Option 1).

Another case, for large application and multiples modules you can use a State Management Library like NgRx or NGXS . I recommend you NGXS.