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

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

我的应用程序组件中有两个 child 组件:patient-fieldspatient-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>


有更好的解决方案吗?

之前谢谢你。

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

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

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

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

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

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