javascript - 在 Angular 中将数据从父级传递给特定子级

Question

我有一个父组件，它通过 *ngFor 加载动态子组件。我的父组件加载用于渲染子组件的数据。根据用户请求后需要额外的数据。

父组件的html:

<panel *ngFor="let item of collection" (selected)="onTogglePanel($event, item)">
    <div panel-body>
        <item-detail
            *ngIf="item.detail; else templateLoading"
            [detail]="item.detail"
            (eventItemLoad)="getExtraData($event, item.detail)"
            ></item-detail>
    </div>
</panel>

每个子组件都会向父组件发出一个事件，该事件将发出 http 请求来获取数据。

问题是，如何将数据传递给特定的子组件？

我一直在阅读有关从父级调用子级方法的内容，但我真的不知道如何仅针对指定的子级调用。

注意:也许我的 parent 获取数据并传递给 child 的方法不正确，每个 child 都应该获取数据。欢迎对该方法提出任何建议。感谢您的帮助。

Answer 1

child 应该自己获取数据。

看起来您只需要 item.detail 来获取附加数据。因此，如果您不需要父级的任何内容，只需让子级发出 http 请求即可。

这是关于separation of concerns :在 Angular 中，您可以通过创建组件来实现这一目标，每个组件都有其特定的用途，如果不需要，就不会“搞乱”另一个组件。