typescript - Skicka en händelse från en barnkomponent till en annan barnkomponent i Angular 7

Jag har två barnkomponenter i min app-komponent: patient-fields och patient-analyser.

patient-fields innehåller formulär och en skicka-knapp medan patient-analyser behöver data från patient-field innan det utför en POST-förfrågan för att få patientens data analyserad.

Min nuvarande lösning är att ha EventEmitter från patient-fields som triggar ett annat eventEmmiter-objekt i App. Sedan kommer jag att skicka appens event emitter för att abonnemangas av patient-analyser som visas nedan:

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 (förälder):

  @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>

Finns det en bättre lösning för detta?

Tack i förväg.

Svar #1

Du bör sträva efter att minska alla beroenden mellan komponenternas mallkoder. Det kommer att tillåta dig att maximera återanvändbarheten mellan dina komponenter.

Med din nuvarande lösning tvingas du att tätt koppla dina komponenters mallkoder, vilket innebär att om du någonsin ändrar eller refaktoriserar en av dem kommer du att stöta på underhållsproblem.

Det bättre sättet att gå är att använda en kommunikationstjänst mellan komponenter. Konceptet är mycket väl förklarat här i Angular-dokumentationen.

Här bör du skapa en tjänst som du injicerar i alla komponenter, där du värdar eventemittorn, och på så sätt kan du prenumerera/emitera utan att koppla dina mallkoder.

Svar #2

Du kan använda behavior subject-observable för detta, skapa en behavior subject i en serviceklass och sedan sända data från patient-fields-komponenten och sedan prenumerera på detta observable inuti patient-analyser så att du får de önskade data du ville ha.

Detta tillvägagångssätt är bättre än Input/Output-egenskapsmetoden eftersom varje förändring av en input/output-egenskap utlöser förändringsdetektering, vilket är en ganska kostsam operation i Angular-ramverket.

Relaterade artiklar