重用Angular组件中的参数(Reusing parameters among Angular components)

重用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。 我不确定这是否是偏离主题的。 如果是这样，请随时将其删除。

When I'm sharing data among components should I call that data only once and provide it as @Input() or should I call that data again on every component's cycle?

For example, I have the following components in one page:

<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>

Where I get the id from the ActivatedRoute and the uid from my authentication service. In some cases, I'm also passing a data input for multiple components in the same page.

One problem I face is that, sometimes, I'm passing data to many children components and it was harder to debug. For example:

game.component.html

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

Then, on details.component.html, I'd pass data as an input to another component - and so on. It became a really long chain:

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

Is it a proper approach? Or would it be better to get those parameters inside of every component?

Another issue, for example, sometimes I need to get the an async parameter (e.g. uid from an Observable) during onInit but it didn't receive it yet. So, I was wondering if I should just call those parameters straight in the component instead of passing them as an input.

PS. I'm not sure if this is off-topic. If so, please feel free to remove it.

最满意答案

这种方法没有错。 实际上，这是目前推荐的方式之一，您的顶级“智能”组件将收集数据，然后将这些数据注入您的“表达”又称“视图”又称“哑”组件。 请注意，数据也会以相反的方式流动：所有事件都向上发出，由包含的“智能”组件处理。 请参阅此处以获得更好（更好）的解释。

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

Nothing wrong with that approach. Actually, this is 1 of the recommended ways nowadays where your top-level 'smart' components would gather the data and then inject that data to your 'presentational' aka 'view' aka 'dumb' components. Note that data also flows the other way around: all Events are emitted upwards, where they are handled by the containing 'smart' component. See here for a good (better) explanation.

I must say this approach has been working very well for me: code is clean (clear responsibilities, reusability and testability of presentational components...) although I must admit I share your concern that it might become a bit tedious when you have quite a lot of nested components.