Двусторонняя привязка angular 8, между дочерними компонентами

У меня проблема в Angular 8. Я использую степпер углового материала, каждый шаг представляет собой отдельный компонент, и есть родительский компонент, который содержит весь степпер введите здесь описание изображения

Это мой основной компонент, как видите, я отправляю группу форм с именем Campaign в три компонента:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [completed]="false">
  <ng-template matStepLabel>DATOS GENERALES</ng-template>
  <app-step-one [parentFormGroup]="campaign"></app-step-one>
</mat-step>
<mat-step [completed]="false">
  <ng-template matStepLabel>CREAR MENSAJE</ng-template>
  <app-step-two [parentFormGroup]="campaign" [actionsData]="dataCampaign"></app-step-two>
</mat-step>
<mat-step [completed]="false">
  <ng-template matStepLabel>PROGRAMAR</ng-template>
  <app-step-three [parentFormGroup]="campaign" [actionsData]="dataCampaign"></app-step-three>
</mat-step>
<mat-step [completed]="false">
  <ng-template matStepLabel>RESUMEN</ng-template>
  <app-step-four [parentFormGroup]="campaign" ></app-step-four>
</mat-step>

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


typescript angular angular8 angular-material two-way-binding
person Paola Godoy    schedule 31.03.2020    source источник
comment
Вы можете использовать привязку @Output. Множество способов сделать это   -  person mwilson    schedule 31.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Создайте класс или интерфейс для связи:

export class StepperData {
  step: number;
  data: any;
}

Каждому компоненту шага требуется Output:

@Output()
done = new EventEmitter<StepperData>();

Когда вы будете готовы перейти к следующему шагу, отправьте вывод родителю:

HTML:

<button mat-button matStepperNext (click)="next()">Next</button>

TS:

next() {
  let stepperData: StepperData = {
    step: <step number>,
    data: <your data>
  }

  this.done.emit(stepperData);
}

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

HTML:

...
<mat-step [completed]="false">
  <ng-template matStepLabel>DATOS GENERALES</ng-template>
  <app-step-one [parentFormGroup]="campaign" (done)="updateData($event)"></app-step-one>
</mat-step>
...

TS:

updateData(stepperData: StepperData) {
  // you have the stepper component data here
  // update your state and model
}

Другой способ сделать это — использовать сервис и наблюдаемые объекты, но использование Input и Output проще.

person Sasan    schedule 31.03.2020
comment
Спасибо, но у меня нет кнопки «Далее», вы можете перейти от первого к трем компонентам, в степперах нет порядка. Я попытаюсь передать данные из компонентов 1, 2 и 3 отцу, а затем отец передаст данные компоненту 4. - person Paola Godoy; 31.03.2020
comment
Я нашел это свойство: selectionChange, поэтому я могу видеть все в своей форме в любое время, когда меняю степпер, но как я могу передавать эту информацию каждый раз, когда я меняю степпер?? - person Paola Godoy; 31.03.2020
comment
Вам нужно знать, когда пользователь выполнил шаг, чтобы вы могли вызвать событие done. selectionChange происходит за пределами mat-step, поэтому в этом сценарии это бесполезно. - person Sasan; 01.04.2020