传递组件作为输入

Question

我正在尝试构建一个通用的时间轴组件，该组件接受一系列项目。 时间轴的项目是一个包含图标，内容和可扩展内容的对象。

单击时间轴的项目时，可扩展内容会以一种样式进行扩展，并且其逻辑处于打开状态，换句话说，单击该项目时，时间轴的项目位置会打开一个新组件。

到目前为止，除了将可扩展内容作为组件传递之外，我没有任何好主意。

有更好的解决方案吗？

Answer 1

根据我的经验，您可以通过三种选择来完成目标。

选项1）：以@Input（）

的形式传递数据

您可以将对象数据作为子组件的@Input（）传递： https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

选项2）：通过与主题/行为主题的服务共享数据

您可以创建一个包含类型为Subject / BehaviorSubject的属性的服务，然后父组件将数据设置为在服务的属性中共享，最后子组件将访问该数据在服务的属性中：< / p>

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

选项3）：使用@ViewChild（）在子组件中设置数据： https://angular.io/guide/component-interaction#parent-calls-an-viewchild

对于您的情况，建议您与子组件（选项1）中的@Input（）属性共享数据。

另一种情况是，对于大型应用程序和多重模块，可以使用状态管理库，例如NgRx或NGXS。我建议您使用NGXS。