在 Angular 中，我是在子组件中使用父组件的方法还是使用服务？

Question

我有一个 Angular 共享（子）组件，它显示带有来自服务器的数据的卡片。还有另外两个组件将在 ngFor 循环中使用这个子组件来显示多张卡片。子组件将需要服务器数据，但它也具有 html 模板中的功能。将这些函数的逻辑以及数据的 API GET 方法放在哪里合适？

我是否将逻辑放在将使用共享组件的每个父组件中 - 这会重复代码吗？或者创建一个包含 API 数据以及子组件使用的功能的服务，然后将该服务提供给子组件？

更新：我通过使用建议的 @Input() 将数据从父级获取到子级并使用 @Output() 发送子级的模板函数（位于父级中）来使其工作组件）输出到要执行的父级。

新问题：现在出现了一个问题，即父级中的函数也返回一个值。所以基本上，我使用 @Output() 从子级发送函数，然后处理父级中的值，然后将其发送回子级。我如何让这个值以正确的顺序显示在子组件中？我将值放入父级的全局变量中，并在子级中使用 @Input() 来获取变量，但它返回的值顺序错误..

Answer 1

通常，您不希望在“演示”组件中从服务器检索任何数据，这就是我所说的您的卡片组件。为了给自己最大的灵活性，我倾向于使用共享服务检索父组件中的数据并通过inputs 将其传递给“子”组件。这样，您的子组件可以以父组件认为合适的任何方式接收其数据。有时您可能不想从服务器检索它，例如，您可能会将数据缓存在本地存储中。通过输入属性传递数据，您可以为组件提供最大的可重用性，因为它的唯一工作就是呈现给定的数据。

如果您的“展示”（卡片）组件能够修改数据，我建议不要直接在子组件中更新数据，而是使用outputs 发出新数据，然后修改数据源在父组件中。在父组件中修改它，然后会通过上面的输入属性更新子组件。如果您直接在子组件中修改数据，则可能会导致数据不同步，因为您的父级将拥有一个值，而您的子级将拥有另一个值。