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

Question

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

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

我目前的解决方案是让 patient-fields 中的 EventEmitter 触发 App 中的另一个 eventEmmiter object。然后，我将传递应用程序的事件发射器以供 patient-analyser 订阅，如下所示：

patient-fields.component.ts (child1):


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

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

patient-analyser.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 (parent):


  @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

你可以为此使用可观察的行为主题，在服务中创建一个行为主题 class 然后从 patient-fields 组件发出数据，然后在 patient-analyser 中订阅这个可观察的所以您将拥有所需的数据。

这种方法优于 Input/Output 属性方式，因为每个 input/output 属性更改都会触发更改检测，这在 angular 框架中是相当昂贵的操作。

Answer 2

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

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

更好的方法是使用 inter-components 通信服务。这个概念解释得很好here in the Angular docs。

在这里，您应该创建一个注入所有组件的服务，您在其中托管事件发射器，因此您可以 subscribe/emit 无需耦合模板代码。

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

Passing an Event from a child component to another child component Angular 7

angular

typescript

eventemitter