试图将事件从父级传递给子级不起作用。角 8

Question

手风琴是父组件，子组件包含数据，因此我需要知道父组件何时更新扩展（单击），以便我可以调用 api。这是为了尽量减少 api 调用的次数。

我已经用 EventEmitters 尝试了很多东西，但它并没有按照我想要的方式工作。即使没有单击父级，该事件也会一直触发。 eventemitter 让我认为它应该只用于从子级触发父级中的事件。所以不要以为我用对了。

现在，我正在使用 @ViewChild 来实际访问 childs 方法来触发它。这工作正常，但我确实收到循环依赖警告，这也不好。

父级：=> PlannedMaintenanceComponent

@ViewChild(forwardRef(() => PlannedMaintenanceDetailComponent), { static: false })
private plannedMaintenanceDetailComponent: PlannedMaintenanceDetailComponent;

updateExpanded(id: string) {

    this.plannedMaintenanceDetailComponent.parentIsExpanded(this.isExpanded, id);
}

孩子：=> PlannedMaintenanceDetailComponent

 public parentIsExpanded(isExpanded: boolean, id: string) {
    this.plannedMaintenanceId = id;
    //call api
  }

当有人点击父组件时，如何在子组件中触发事件？

Answer 1

我会使用 EventEmitter int PlannedMaintenanceDetailComponent，这样您就可以在该 EventEmitter 发出时在执行回调的父组件中订阅它。

export class PlannedMaintenanceDetailComponent {
 isDropped: boolean;
 isDroppedEvent= new EventEmitter<boolean>()
 //..

 onClick() {
   this.isDropped = !isDropped() ;
   isDroppedEvent.emit(isDropped);
 }
}

然后在父类中

private plannedMaintenanceDetailComponent: PlannedMaintenanceDetailComponent;
ngOnInit() {
  plannedMaintenanceDetailComponent.isDroppedEvent.subscribe((isDropped) => {
   if (isDropped){
    call my api
   }
 })    
}