在 Angular 的嵌套子组件中传递数据的最佳方法是什么？

Question

我有一个场景，例如

<parent-comp>
 <side-bar></side-bar>
 <item-details></item-details>
</parent-comp>

<side-bar>
 <item-list></item-list>
</side-bar>

我需要将项目列表共享到组件“ItemListComponent”和“ItemDetailsComponent”中，并牢记层次结构

方法一

我可以从 ParentComponent 中的 ItemService 获取项目并通过属性/属性发送它<sidebar [pages]="pages"></sidebar> >>> <item-list [pages]="pages"></item-list>和<item-details[pages]="pages"></item-details>

我需要通过 SidebarComponent 传递数据以将其传输到 ItemListComponent。

方法二

从 ParentComponent 中的 ItemService 获取项目，而不是通过属性/属性传递，它发出数据（RxJs），比如事件名称“ItemDataFetched”，以及订阅该事件的 ItemList/ItemDetails 组件。

两者中最好的方法是什么？ 或者还有其他更好的方法吗？

Answer 1

在此处查看： https : //angular.io/guide/component-interaction angular 团队提出的方法。

我会说输入绑定是大多数情况下的方法。

1. 这是专利儿童通信的标准方式。 这将是未来开发人员所期望看到的，使调试更容易。
2. 通常要避免事件传递数据。 如果您没有使用带有发射器的事件绑定来进行子级到父级的通信，那么您将脱离角度循环并可能导致意外问题。
3. 使用服务始终是一种选择。 请记住，尽管服务是单例的。 因而有其自身的局限性。

顺便说一句，我希望子组件通知父组件选择并仅将所选项目的页面传递给项目详细信息组件。 不是整个集合。