Question

当我在组件之间共享数据时，我应该只调用一次该数据并将其作为@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>

我从id获取ActivatedRoute，从我的身份验证服务获取uid。在某些情况下，我还会在同一页面中为多个组件传递data输入。

我面临的一个问题是，有时候，我将数据传递给许多子组件，并且调试起来比较困难。例如：

game.component.html

<game-details [data]="data"></game-details>
<game-progress [data]="data"></game-progress>

然后，在 details.component.html 上，我将data作为输入传递给另一个组件 - 依此类推。它变成了一个非常长的链条：

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

这是一种正确的方法吗？或者在每个组件中获取这些参数会更好吗？

另一个问题，例如，有时我需要在async期间获取一个uid参数（例如来自Observable的onInit），但它还没有收到它。所以，我想知道我是否应该直接在组件中调用这些参数，而不是将它们作为输入传递。

PS。我不确定这是否是偏离主题的。如果是这样，请随时将其删除。

Answer 1

这种方法没有错。实际上，这是现在推荐的一种方式，你的顶级＆＃39; smart＆＃39;组件将收集数据，然后将这些数据注入您的“演示文稿”中。又名＆＃39;观看＆＃39;又名＆＃39; dumb＆＃39;组件。请注意，数据也会相反：所有事件都向上发送，由包含“智能”的事件处理。零件。有关更好（更好）的解释，请参阅here。

我必须说这种方法对我来说非常有效：代码很干净（明确的责任，可重用性和表现性组件的可测试性......）虽然我必须承认我同意你的担心，当你有可能变得有点乏味有很多嵌套组件。

Answer 2

一种常见的方法是将其用作Injectable服务。

它的好处，正如它所说：

组件可以创建依赖项，通常使用new 运营商。组件可以通过引用a来查找依赖项全局变量。组件可以具有传递给它的依赖项需要的地方。

对于角度1，请检查https://docs.angularjs.org/guide/di

对于角度2，请检查What's the best way to inject one service into another in angular 2 (Beta)?

中的第一个答案

Answer 3

很难回答这个问题，因为我不确定你想要实现什么，但可能值得研究服务。服务将为其声明的组件下的组件提供一个共享空间（例如app.component或甚至app.mudule）。然后，您可以通过该服务将新参数传递给其他组件。这将是拥有共享状态的正确方法，您可以通过注入服务来传递许多组件。

重用Angular组件中的参数

3 个答案: