Двухстороннее связывание angular 8, между дочерними компонентами - PullRequest
Новая
       19

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

0 голосов
/ 31 марта 2020

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

Это мой основной компонент, как вы видите, я отправляю группу форм с именем 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>

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

1 Ответ

0 голосов
/ 31 марта 2020

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

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

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

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

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

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 проще.

...