Передача события из дочернего компонента в другой дочерний компонент Angular 7 - PullRequest
Новая
       18

Передача события из дочернего компонента в другой дочерний компонент Angular 7

1 голос
/ 09 мая 2019

В моем приложении есть два дочерних компонента: patient-fields и patient-analyser.

patient-fields содержит формы и кнопку отправки, в то время как patient-analyser нужны данные из patient-field, прежде чем он выполнит запрос POST для анализа данных пациента.

Мое текущее решение имеет EventEmitter из patient-fields, который запускает другой объект eventEmmiter в App. Затем я передам источник событий приложения для подписки на 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>

Есть ли лучшее решение для этого?

Спасибо, прежде чем.

Ответы [ 2 ]

2 голосов
/ 09 мая 2019

Вы должны стремиться уменьшить любую зависимость между кодами шаблонов компонентов. Это позволит вам максимизировать возможность повторного использования между вашими компонентами.

С вашим текущим решением вы вынуждены тесно связывать коды шаблонов ваших компонентов, что означает, что если вы когда-нибудь измените или реорганизуете один из них, у вас возникнут проблемы с поддержкой.

Лучший способ - использовать услугу межкомпонентной связи. Концепция очень хорошо объяснена здесь, в Angular Docs .

Здесь вы должны создать сервис, который вы внедряете во все компоненты, где вы размещаете источник событий, и, таким образом, вы можете подписываться / отправлять, не связывая коды вашего шаблона.

0 голосов
/ 09 мая 2019

Вы можете использовать субъект поведения, наблюдаемый для этого, создать один объект поведения в классе обслуживания, а затем выдать данные из компонента поля пациента, а затем подписать это наблюдаемое внутри анализатора пациента, чтобы получить желаемые данные.

Этот подход лучше, чем способ свойства ввода / вывода, поскольку каждое изменение свойства ввода / вывода запускает обнаружение изменений, что является довольно дорогой операцией в угловой структуре.

...