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

Question

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

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

中看到的

问题陈述:单击父级(应用程序组件)上的按钮时，我想向前三个子级发送特定于他们的值。

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

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

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

请点击加载更多按钮并检查控制台以了解问题。

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

这里有两种可能的策略:

• 将带有索​​引的输入传递给 <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与值并将数据传递到组件的输入中。