在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 请求以获取数据。

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

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

注意：也许我的父母获取数据并将其传递给孩子的方法不正确，每个孩子都应该获取数据。欢迎对这种方法提出任何建议。感谢您的帮助。

Answer 1

孩子应该自己获取数据。

看起来您只需要item.detail 即可获取额外数据。所以如果你不需要父母的任何东西，只要让孩子发出http请求。

这是关于 separation of concerns 的：在 Angular 中，您通过创建组件来实现这一点，每个组件都服务于其特定目的 - 如果不需要的话，不要“搞乱”另一个组件。