Передача данных от родителя конкретным детям в 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, но я не знаю, как на самом деле вызывать его только для указанного дочернего элемента.

ПРИМЕЧАНИЕ. Возможно, мой подход родителей к получению данных и передаче их детям неверен, и каждый ребенок должен получать данные. Любые советы по подходу приветствуются. Спасибо за любую помощь.

Answer 1

Ребенок должен получить данные самостоятельно.

Похоже, вам просто нужно item.detail, чтобы получить дополнительные данные. Поэтому, если вам ничего не нужно от родителя, просто позвольте ребенку сделать http-запрос.

Это примерно разделение интересов : в Angular вы достигаете этого, создавая компоненты, каждый из которых служит своей определенной цели, а не "связываясь" с другим, если он не нужен.