首页 > 解决方案 > 正在为每个列表项调用从 ngOnInit() 内部调用的函数

问题描述

我有一个组件是它的父组件的子组件。父组件使用*ngFor

由于同一个子组件是列表的一个项目:ngOnInit()为每个子组件调用。我有一个 observable,它为ngOnInit().

当触发可观察对象的偶数时,所有可观察对象都返回结果,而不仅仅是触发事件的特定子组件的可观察对象。

我想添加一个能够区分触发了哪个子组件的处理程序,以便只有该子组件的 observable 返回结果。

<parent-component>
  <div *ngFor="let child of children">
    <child-component [child]="child"> </child-component>
<parent-component>

子组件的模板:

<child-component>
  <redirect-overlay 
     [target] =>"speedbump+childIndex"
  </redirect-overlay>
  <button 
     data-toggle="modal"
     [attr.data-target]="#speedbump+childIndex"> 
</button>
<child-component>

重定向覆盖组件集是 observable 中的一个值。这个 observable 在<child-component>'sngOnInit()函数中声明。

每当这个 observable 接收到一个值时,它就会触发所有子项,而不仅仅是调用它的子项。

例如:如果有 50 个子组件,那么所有 50 个子组件都会触发 observable

内部设置的可观察对象<redirect-component>

    constructor(_overlayResponseObservableService: OverlayResponseObservableService){}

public navigateAway(event: any){
  this._overlayResponseObservableService.setReturnResponse("SOMEOBJECT");
}

内部<child-component>

  constructor(_overlayResponseObservableService: 
              OverlayResponseObservableService){}
    ngOnInit(){
     this._overlayResponseObservableService.getReturnedResponse().subscribe(
     responseObj: any)=>{
    /* Do something here but this part is being called by every child
 item that is part of the list of the parent. This part is invoked for
 every child because this observable isn't able to differentiate for
 which child component 
it was called for, it is invoked for all children!
 I need to have the context of the child item that called the
 redirect-overlay */

}
    }

标签: javascripthtmljqueryangularjsangular

解决方案


推荐阅读