Как передать данные из родительского компонента в определенный динамически созданный дочерний компонент?

Question

Минимальное представление: https://stackblitz.com/edit/angular-bs4ppy

Я генерирую дочерние (карточные) компоненты, используя цикл * ngFor для свойства массива cards конфигурации. Как вы можете видеть ниже appcomponent.html

Постановка задачи: Нажатием кнопки на родительском элементе (appcomponent) я хочу отправить первым трем дочерним элементам определенное для них значение.

Например: если компонент приложения имеет 8 дочерних компонентов. При нажатии кнопки я хочу передать 1 дочернему элементу 1, 2 дочернему элементу 2 и 3 дочернему элементу 3. Другие дочерние компоненты не должны получать никаких сообщений.

Теперь проблема в том, что если я отправлю сообщение с использованием темы и прослушу его внутри дочернего компонента, все дочерние компоненты получат одно и то же сообщение вместо сообщения, направленного каждому дочернему компоненту. Если я испущу x из parent и укажу в журнале внутри дочернего элемента subscribe (), я получу x раз.

Мне трудно выразить это словами, поэтому я добавил код, а также создал образец стекаблица.

Пожалуйста, нажмите кнопку load more и проверьте консоль, чтобы понять проблему.

appComponent.html :

<div *ngFor="let cardConfig of carouselConfig.cards">
  <app-card [cardConfig]="cardConfig"></app-card>
</div>
<button (click)="loadMore()"> load more</button>

AppComponent.ts

export class AppComponent {
  name = "Angular";
  carouselConfig: any;   
  cardsTable:any;

  constructor(private carouselService:CarouselService) {
    this.carouselConfig = carouselConfig;
      this.cardsTable =  _.cloneDeep(this.carouselConfig.cards.map(obj=> ({ ...obj, Loaded: 'false' })));
  }

  loadMore() {
    var cardsToLoad = this.cardsTable
      .filter(this.loadedCardsFilter)
      .slice(0, 3);

    console.log("cardsTable", cardsToLoad);

    this.carouselService.endReachedSubject.next(cardsToLoad);
  }
  loadedCardsFilter(item) {
    return item.Loaded == "false";
  }
}

Config.ts

export const carouselConfig = {
  size: 3,
  height: "200px",
  width: "600px",
  cards: [
    {
      Id: "1",
      dataModel: "xyz",
      manifestPath: "customcards/packingslip",      
    },
   {
      Id: "2",
      dataModel: "xyz",
      manifestPath: "customcards/packingslip",      
    },
{
      Id: "3",
      dataModel: "xyz",
      manifestPath: "customcards/packingslip",      
    },
   {
      Id: "4",
      dataModel: "xyz",
      manifestPath: "customcards/packingslip",      
    }
  ]
};

Карусель Сервис

export class CarouselService {
  endReachedSubject: BehaviorSubject<any> = new BehaviorSubject("start");
  constructor() { }
}

Answer 1

Здесь возможны

2 стратегии:

• Передать вход с индексом в <app-card> и в вашей наблюдаемой форме отправить объект с ключом, индексом и значением,данные, которые вы хотите отправить:

*ngFor="let cardConfig of carouselConfig.cards; let i= index"
..
<app-card [index]="index">

this.carouselService.endReachedSubject.next({
 0: [..., ..., ...],
 1: [...],
 2: []
});

и в вашей карте:

this.carouselService.endReachedSubject.pipe(
  map(data => data[this.index])
).subscribe( ...)

• Другая стратегия заключается в улучшении carouselConfig.cards с помощьюзначение и передать данные на входе в вашем компоненте.