Javascript 角度构件间参数的重用

当我在组件之间共享数据时，我应该只调用该数据一次并将其作为

@Input（）

提供，还是应该在每个组件的周期中再次调用该数据

例如，我在一个页面中包含以下组件：

<game-info [id]="params?.id"></game-info>
<game-leaderboard [uid]="auth" [id]="params?.id"></game-leaderboard>
<game-progress [uid]="auth" [id]="params?.id"></game-progress>

然后，在details.component.html上，我将

数据作为输入传递给另一个组件，以此类推。它变成了一条很长的链条：

<game-info [data]="data"></game-info>
<game-players [id]="(data | async)?.$key></game-players>


一种常见的方法是将其用作
可注入的
服务

为了它的好处，正如它所说：

组件可以创建依赖项，通常使用新的
操作人员组件可以通过引用
全局变量。组件可以将依赖项传递给它
在需要的地方

对于角度1，检查

对于angular 2，请查看
中的第一个答案。很难回答这个问题，因为我不确定您到底想要实现什么，但可能值得研究服务。服务将在其声明的组件下为组件提供一个共享空间（例如
app.component
或甚至
app.mudule
）。然后，您可以通过服务将新参数传递给其他组件。这将是拥有共享状态的正确方式，您可以通过注入服务来传递许多组件
 这种方法没有错。事实上，这是当今推荐的方法之一，您的顶级“智能”组件将收集数据，然后将该数据注入到您的“呈现”组件（又称“视图”又称“哑”组件）中。请注意，数据也以另一种方式流动：所有事件都向上发出，由包含“智能”组件处理。请参阅以获得更好的解释

我必须说，这种方法对我来说非常有效：代码是干净的（明确的职责、表示组件的可重用性和可测试性…），尽管我必须承认我和你一样担心，当你有很多嵌套组件时，它可能会变得有点乏味
 您熟悉Angular中的服务吗？例如，我已经在使用服务获取数据了。现在，我在顶级组件中调用该服务，并将其传递给该组件中的其他组件。我关心的正是：我应该调用每个组件中的服务吗？但我会有很多重复的服务呼叫，感觉不太对劲……从我上面的评论中复制：“是的，例如，我已经在使用服务获取数据。现在，我在顶级组件中调用该服务，并将其传递给该组件中的其他组件。我关心的正是：我应该调用每个组件中的服务吗？但是，我会有很多重复的服务调用，而且感觉不太对劲……”我在这里缺少了一些关于使用服务的信息吗？例如，在每个组件中使用服务，然后我会对同一个端点进行多个REST调用，只是为了获取游戏的数据。
<game-info [data]="data"></game-info>
<game-players [id]="(data | async)?.$key></game-players>