在 Angular 个组件中重用参数
Reusing parameters among Angular components
当我在组件之间共享数据时，我应该仅调用该数据一次并将其作为 @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>
我从 ActivatedRoute 获得 id 和从我的身份验证服务获得 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>
这是正确的方法吗？或者在每个组件中获取这些参数会更好吗？
另一个问题，例如，有时我需要在 onInit 期间获取一个 async 参数（例如来自 Observable 的 uid），但它还没有收到。所以，我想知道我是否应该直接在组件中调用这些参数，而不是将它们作为输入传递。
PS。我不确定这是否是题外话。如果是这样，请随时将其删除。
一种常见的方法是将其用作 Injectable 服务。
它的好处，正如它所说：
The component can create the dependency, typically using the new
operator. The component can look up the dependency, by referring to a
global variable. The component can have the dependency passed to it
where it is needed.
对于angular1，勾选https://docs.angularjs.org/guide/di
对于angular2，检查What's the best way to inject one service into another in angular 2 (Beta)?
中的第一个答案
很难回答这个问题，因为我不确定你到底想达到什么目的，但可能值得研究一下服务。服务将在其声明的组件下共享一个 space（例如 app.component 甚至 app.mudule）。然后您可以通过服务将新参数传递给其他组件。这将是拥有共享状态的正确方式，您可以通过注入服务来传递许多组件。
这种方法没有错。实际上，这是当今推荐的一种方式，您的顶级 'smart' 组件将收集数据，然后将该数据注入到您的 'presentational' aka 'view' aka 'dumb' 组件.请注意，数据也以相反的方式流动：所有事件都向上发出，由包含的 'smart' 组件处理。请参阅 here 以获得更好（更好）的解释。
我必须说这种方法对我来说效果很好：代码很干净（清晰的职责、可重用性和展示组件的可测试性......）尽管我必须承认我和你一样担心它可能会变得有点乏味当你有很多嵌套组件时。
当我在组件之间共享数据时，我应该仅调用该数据一次并将其作为 @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>
我从 ActivatedRoute 获得 id 和从我的身份验证服务获得 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>
这是正确的方法吗？或者在每个组件中获取这些参数会更好吗？
另一个问题，例如，有时我需要在 onInit 期间获取一个 async 参数（例如来自 Observable 的 uid），但它还没有收到。所以，我想知道我是否应该直接在组件中调用这些参数，而不是将它们作为输入传递。
PS。我不确定这是否是题外话。如果是这样，请随时将其删除。
一种常见的方法是将其用作 Injectable 服务。
它的好处，正如它所说：
The component can create the dependency, typically using the new operator. The component can look up the dependency, by referring to a global variable. The component can have the dependency passed to it where it is needed.
对于angular1，勾选https://docs.angularjs.org/guide/di
对于angular2，检查What's the best way to inject one service into another in angular 2 (Beta)?
中的第一个答案很难回答这个问题，因为我不确定你到底想达到什么目的，但可能值得研究一下服务。服务将在其声明的组件下共享一个 space（例如 app.component 甚至 app.mudule）。然后您可以通过服务将新参数传递给其他组件。这将是拥有共享状态的正确方式，您可以通过注入服务来传递许多组件。
这种方法没有错。实际上，这是当今推荐的一种方式，您的顶级 'smart' 组件将收集数据，然后将该数据注入到您的 'presentational' aka 'view' aka 'dumb' 组件.请注意，数据也以相反的方式流动：所有事件都向上发出，由包含的 'smart' 组件处理。请参阅 here 以获得更好（更好）的解释。
我必须说这种方法对我来说效果很好：代码很干净（清晰的职责、可重用性和展示组件的可测试性......）尽管我必须承认我和你一样担心它可能会变得有点乏味当你有很多嵌套组件时。