Передайте данные из дочернего компонента в DIRECTIVE, а затем передайте их родительскому компоненту - PullRequest
Новая
       76

Передайте данные из дочернего компонента в DIRECTIVE, а затем передайте их родительскому компоненту

0 голосов
/ 14 июля 2020

У меня есть случай использования, когда мне нужно визуализировать различные дочерние компоненты на основе некоторого условия. Чтобы добиться этого, я использовал этот Tutorial .

Здесь создается компонент формы Dynami c, и в зависимости от некоторых условий директива загружает дочерний компонент.

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

  1. Я пробовал использовать @Output, но генерируемое событие не фиксируется в родительском компоненте, так как между ними есть директива.

  2. Я пробовал использовать службу вместе с BehaviourSubject, но иногда событие подписки запускается немного поздно, из-за этого могут быть изменения пользовательского интерфейса и данные потеряны.

Любая помощь приветствуется.

Пример кода:

ts-файл дочернего компонента 

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ShareDataService } from '../../../../services/dataHelper/share-data.service';

@Component({
    selector: 'form-radio',
    templateUrl: './form-radio.component.html',
    styleUrls: ['./form-radio.component.scss'],
})
 export class FormRadioComponent implements OnInit {
  field;
 group: FormGroup;
 
 @Output() valuechange: EventEmitter<any> = new EventEmitter<any>();

constructor(
  private dataSharing: ShareDataService,
 ) { }

 ngOnInit() {
   
 }

  handleOnChange (event) {
      this.dataSharing.shareData(event.target.value);
     //this.valuechange.emit(event.target.value);
  }

ts-файл с кодом директивы 

   @Directive({
      selector: '[dynamicField]'
   })
      export class DynamicFieldDirective implements OnInit{
   @Input() field;
   @Input() isTextField;
   @Input() group: FormGroup;
   //@Output() emitEvent: EventEmitter = new EventEmitter();
   componentRef: any;
   constructor(
        private resolver: ComponentFactoryResolver,
        private container: ViewContainerRef
   ) {}

   getValueFromComponent (event) {
        //this.emitEvent.emit(event.value);
        console.log("test directive");
   }

Файл TS родительского компонента 

    export class DynamicFormComponent implements OnInit {
     @Input() config = [];

     @Input() isTextField;

     @Output() submit: EventEmitter<any> = new EventEmitter<any>();

     handleSubmit(event: Event) {
         event.preventDefault();
         event.stopPropagation();
         this.submit.emit(this.value);
     }

Я правильно определил в файле html.

...