[英]How to emit data from Parent Component to a specific Dynamically created Child Component?
Minimal Representation: https://stackblitz.com/edit/angular-bs4ppy最小表示: https://stackblitz.com/edit/angular-bs4ppy
I am generating child(card) components using *ngFor loop on an array property cards
of the config.我在配置的数组属性
cards
上使用 *ngFor 循环生成子(卡)组件。 As you can see in the below appcomponent.html
正如您在下面的
appcomponent.html
中看到的
Problem Statement: On the click of the button on parent (appcomponent) I want to send the first three children a value specific to them.问题陈述:单击父级(appcomponent)上的按钮时,我想向前三个子级发送一个特定于他们的值。
For ex: If app component has 8 child components.例如:如果 app 组件有 8 个子组件。 On button click I want to pass 1 to child 1, 2 to child 2 and 3 to child 3. Other child components should not get any message.
单击按钮时,我想将 1 传递给孩子 1,将 2 传递给孩子 2,将 3 传递给孩子 3。其他子组件不应收到任何消息。
Now the problem is that if I send a message using subject and listen to it inside child component, all the child components will get the same message instead of message directed to each child.现在的问题是,如果我使用主题发送消息并在子组件中收听它,所有子组件都会收到相同的消息,而不是针对每个子组件的消息。 If I emit x from parent, and console log it within child inside subscribe(), I will get x times.
如果我从父级发出 x,并在 subscribe() 内的子级中进行控制台记录,我将得到 x 次。
It is hard for me to put it in words so I have added code and also created a stackblitz sample.我很难用语言表达,所以我添加了代码并创建了一个 stackblitz 示例。
Please click on load more
button and check the console to understand the problem.请单击
load more
按钮并检查控制台以了解问题。
appComponent.html : appComponent.html :
<div *ngFor="let cardConfig of carouselConfig.cards">
<app-card [cardConfig]="cardConfig"></app-card>
</div>
<button (click)="loadMore()"> load more</button>
AppComponent.ts应用组件.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",
}
]
};
Carousel Service轮播服务
export class CarouselService {
endReachedSubject: BehaviorSubject<any> = new BehaviorSubject("start");
constructor() { }
}
2 strategies are possible here:这里有两种可能的策略:
<app-card>
and in your observable, send an object with as a key, the index, and as a value, the data you want to send:<app-card>
并在您的 observable 中,发送一个 object 作为键、索引和作为值,您要发送的数据:*ngFor="let cardConfig of carouselConfig.cards; let i= index"
..
<app-card [index]="index">
this.carouselService.endReachedSubject.next({
0: [..., ..., ...],
1: [...],
2: []
});
and in your card:并在您的卡中:
this.carouselService.endReachedSubject.pipe(
map(data => data[this.index])
).subscribe( ...)
carouselConfig.cards
with the value and pass the data in input in your component.carouselConfig.cards
并在组件的输入中传递数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.