Как получить данные из дочернего компонента в родительский компонент, когда кнопка отправки формы находится в родительском компоненте?

Question

У меня есть два компонента:

Родительский компонент HTML:

<parent-component>
    <child-component [input]="inputValue"> </child-component>
    <child-component [input]="inputValue"> </child-component>

    <button mat-stroked-button> Submit </button>
</parent-component>

Родительский компонент TS: здесь я пытался проверить, правильно ли работает ViewChild wokrs.Я получаю значение свойства child от моего родительского компонента.

export class ParentComponent implements OnInit {

  @ViewChild(ChildComponent) childReference;
  parentString: string;

  constructor(
    private cdRef: ChangeDetectorRef,
  ) { }

  ngOnInit() {
  }


  ngAfterViewInit() {
    this.parentString = this.childReference.exampleChild;
    this.cdRef.detectChanges();
  }

В моем дочернем компоненте html у меня есть пара <mat-form-field> входных данных:

<form [formGroup]="myForm">
    <mat-form-field>
           <input matInput formControlName="myInput">
      </mat-form-field>
     <mat-form-field>
           <input matInput formControlName="myInput2">
      </mat-form-field>
</form>

Но как правильно получитьзначения matInput от дочернего компонента в родительском компоненте, когда фактическая кнопка отправки находится в родительском компоненте?

Answer 1

Если у вас есть редукционная настройка вашего проекта. Вы должны пойти с редуксом. Redux накапливается для решения подобных проблем.

Answer 2

Я бы создал public getData() {} функцию для дочернего компонента, которая возвращает данные дочернего компонента. Отправка родителем будет выглядеть примерно так:

public submit() {
    const data = this.childReference.getData();
    // do whatever you need to do with the data from child
}

Похоже, вы пытаетесь получить данные от нескольких детей в вашем примере, и в этом случае вам придется использовать ViewChildren .

Я бы также рассмотрел вопрос о том, чтобы родительская форма имела Angular и реструктурировала ваши компоненты так, чтобы дочерние компоненты представляли собой пользовательские входные данные, которые работают с этой формой. См. Пользовательский компонент ввода с именем state-selector, созданный в в этом руководстве