Angular 将数据从子级传递到父级，其中n个子级以角度进行传递，而不在沿途的每个组件中发射

如果我在Angular中有此组件层次结构：

组件F中发生了一些事情，B应该知道。 我可以这样做的一种方法是在F中使用emit并将其传递到A，但这将要求我在每个组件E、D和C中发出事件，即使它们不关心也不应该关心正在发出的数据，所以我将在F中写入

export class F .... {
  ...

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

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

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

---

类似于？

类似于此的内容未选中，但作为指导：

export class MySharedService {

  private data$ = new Subject<any>();
  public setData(data: any) {
      this.data$.next(data);
  }
  public getData(): Observable<any> {
      return this.data$.asObservable();
  }
}

---

类似的内容未选中，但作为指导：

export class MySharedService {

  private data$ = new Subject<any>();
  public setData(data: any) {
      this.data$.next(data);
  }
  public getData(): Observable<any> {
      return this.data$.asObservable();
  }
}

---

如果您确定可能只有一个类型为A的父级，那么可以插入子级并直接调用它

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

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

---

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

如果您确定您可能只有一个类型为a的父级，您可以插入子级并直接调用它

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

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

---

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

您可以使用共享服务ie来实现

// 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});

---

您可以使用共享服务即

// 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});

---

使用共享服务并订阅数据更改，这正是数据更改的目的。单例服务非常适合此场景。使用共享服务并订阅数据更改，这正是数据更改的目的。单例服务非常适合此场景。