在Angular中将子项中的数据从子项传递给具有n个子项的父项，而不会沿途发射每个组件

如何解决在Angular中将子项中的数据从子项传递给具有n个子项的父项，而不会沿途发射每个组件

如果我在Angular中具有以下组件层次结构：

在组件F中发生了一些B应该知道的事情。我可以做到的一种方法是在F中使用emit()并将其一直传递到A，但这将要求我在每个组件E，D和C中发出事件，甚至尽管他们不在乎也不应该在乎所发送的数据-所以在FI中会写

export class F .... {
  ...

  @Output() emitterName: EventEmitter<any> = new EventEmitter<any>();

  doSomething(data) {
   ...
   this.emitterName.emit(data);
  }
  ...
}

然后，E类应该像<app-f-selector (emitterName)="setData($event)"><app-f-selector/>那样呼叫F

在E中，我应该创建一个新函数setData()，该函数将事件一直发送到D：

export class E .... {
  ...

  @Output() emitterName: EventEmitter<any> = new EventEmitter<any>();

  setData(data) {
   ...
   this.emitterName.emit(data);
  }
  ...
}

现在我应该对D和C做相同。这看起来真的很糟糕，当一路上有n个子代没有代码重复时，Angular中是否有某种优雅的方式将数据从子代组件传递到父代组件？像React context一样？

解决方法

类似这样的东西（未选中，但仅供参考）：

this.mySharedService.getData().subscribe(data => ...do something here);

然后在需要此数据的任何组件中，通过构造函数注入并订阅更改：

f= open("test.txt","w+")
os.chdir("//10.2.30.61/c$\Qlikview_Tropal/apps/ventes")
for fichiers in glob.glob("*"):
    today = datetime.datetime.today()
    modified_date = datetime.datetime.fromtimestamp(os.path.getmtime(fichiers))
    duration = today - modified_date
    if duration.days < 1:
        f.write(f"{fichiers} = {duration} \n")

您可以使用共享服务来完成它。

// shared.service.ts
export class SharedService  {
  private updateComp = new Subject<any>();
  public updateComp$ = this.updateComp.asObservable();
    
    public updateComponent(data: any) {
    this.updateComp.next(data);
  }
}

// C OR D Component .ts enject sharedService in constructor
ngOnInit() {
    this.sharedService.updateComp$.subscribe((res: any) => {
    //you code...
    });
}

// F Component .ts call share service method i.e.
this.sharedService.updateComponent({ you data});

如果您确定只有一位父母的类型为“ A”，则可以注入孩子并直接调用它。

export class F {
  constructor(
    private parentA: AComponent
  ){}

  setData(data) {
   this.parentA.doSomething(data);
  }
}

但是我不推荐这样的结构，因为这会使组件F与组件A紧密耦合。在我们的项目中，我们仅使用这种方法来实现动态生成的自定义UI组件。