将事件从子组件传递到另一个子组件 Angular 7

Question

我的应用程序组件中有两个子组件：patient-fields和patient-analyser.

在patient-fields包含表单和提交按钮，而patient-analyser从需要的数据patient-field它执行POST请求，以获得患者的数据进行分析之前。

我当前的解决方案是使用 EventEmitter 来patient-fields触发App. 然后，我将传递应用程序的事件发射器以供订阅，patient-analyser如下所示：

患者字段.component.ts（child1）：

 @Output() toggleSubmit: EventEmitter<FormData> = new EventEmitter();

  onSubmit() {
    this.toggleSubmit.emit(this.patientFieldForm.value);
  }

患者分析器.component.ts（child2）：

  @Input() pf: EventEmitter<any>;
  constructor() { }

  ngOnInit() {
    this.pf.subscribe((data) => {
      // Performing a POST request to analyse the patient data
    });

app.component.ts（父）：

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

  onSubmit(patientFields: FormData) {
    this.pf.emit(patientFields);
  }

app.component.html：

<app-patient-analyser
    [pf] = pf
  ></app-patient-analyser>

<app-patient-fields
    (toggleSubmit)="onSubmit($event)"
  ></app-patient-fields>

有没有更好的解决方案？

之前谢谢。

Answer 1

您应该致力于减少组件模板代码之间的任何依赖性。它将允许您最大限度地提高组件之间的可重用性。

使用当前的解决方案，您被迫将组件模板代码紧密耦合，这意味着如果您修改或重构其中之一，您将遇到可维护性问题。

更好的方法是使用组件间通信服务。这个概念在 Angular 文档中有很好的解释。

在这里，您应该创建一个注入到所有组件中的服务，在其中托管事件发射器，因此您可以在不耦合模板代码的情况下订阅/发送。