Question

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

patient-fields包含表格和“提交”按钮，而patient-analyser需要patient-field的数据，然后才能执行POST请求以分析患者的数据。

我当前的解决方案是让patient-fields中的EventEmitter触发App中的另一个eventEmmiter对象。然后，我将传递应用程序的事件发射器，以供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（父级）：


  @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

您应该致力于减少组件模板代码之间的依赖性。它将使您能够最大程度地提高组件之间的可重用性。

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

更好的方法是使用组件间通信服务。 here in the Angular docs对该概念进行了很好的解释。

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

Answer 2

您可以为此使用可观察的行为主题，在服务类中创建一个行为主题，然后从患者字段组件中发射数据，然后在患者分析器中订阅此可观察行为，以便获得所需的数据。

此方法优于输入/输出属性方式，因为每个输入/输出属性更改都会触发更改检测，这在角度框架中是相当昂贵的操作。

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

2 个答案: