如何将数据从父组件发送到特定的动态创建的子组件？答案

【问题标题】：How to emit data from Parent Component to a specific Dynamically created Child Component?如何将数据从父组件发送到特定的动态创建的子组件？
【发布时间】：2020-03-05 17:11:57
【问题描述】：

最小表示：https://stackblitz.com/edit/angular-bs4ppy

我在配置的数组属性cards 上使用 *ngFor 循环生成子（卡片）组件。正如您在下面看到的appcomponent.html

问题陈述：单击父级（appcomponent）上的按钮时，我想向前三个子级发送一个特定于它们的值。

例如：如果应用组件有 8 个子组件。单击按钮时，我想将 1 传递给孩子 1 ，将 2 传递给孩子 2 ，将 3 传递给孩子 3。其他子组件不应收到任何消息。

现在的问题是，如果我使用主题发送消息并在子组件中收听它，所有子组件都会收到相同的消息，而不是针对每个子组件的消息。如果我从父级发出 x，并在 subscribe() 内的子级中进行控制台记录，我将得到 x 次。

我很难用语言表达，所以我添加了代码并创建了一个 stackblitz 示例。

请点击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() { }
}

【问题讨论】：

标签： javascript angular typescript rxjs reactive-programming

【解决方案1】：

这里有2种策略：

将带有索引的输入传递给 <app-card>，然后在您的 observable 中发送一个对象，其中包含您要发送的数据作为键、索引和值：

*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，并在组件的输入中传递数据。

【讨论】：