Лучший способ собрать данные из нескольких компонентов в один в Angular 6

Question

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

У меня есть Stepper (из Angular Material);содержимое каждого шага находится внутри разных компонентов;на всех этапах мы собираем данные от клиента, используя несколько полей ввода.

Код выглядит следующим образом.

Шаговый:

<mat-horizontal-stepper #stepper>
  <mat-step [stepControl]="stepOne">
    <ng-template matStepLabel><span class="someClass">Customer Information</span></ng-template>

    <step-one></-step-one>

  </mat-step>
  <mat-step [stepControl]="stepTwo">
    <ng-template matStepLabel><span class="someClass">Payment Information</span></ng-template>

    <step-two></step-two>

  </mat-step>
    ...
  <mat-step>
    <ng-template matStepLabel><span class="someClass">Confirmation</span></ng-template>

    <confirmation></confirmation>

  </mat-step>
</mat-horizontal-stepper>

Содержание (множество полей, таких какthis):

  <mat-form-field class="dcp-input-field">
    <input matInput placeholder="First Name" formControlName="name" [errorStateMatcher]="matcher">
      ...
  </mat-form-field>

То, что я хочу, - это собрать все данные в последнем контроллере «подтверждения», чтобы показать их клиенту.Я знаю, что существуют разные способы связи между компонентами, но какой из них лучший в этом случае?Я пытался использовать сервис, но что-то пошло не так.

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

Спасибо за совет.

Answer 1

Если вы хотите сделать это, используя viewChild, вы можете действовать следующим образом:

Первый дочерний компонент

import { Component } from '@angular/core';

@Component({
  selector: 'cmp-1',
  template: ''
})
export class Cmp1Component  {
  public data: any[] = [
    {
      name: "component 1",
      action: "something",
      status: "alive"
    }
  ]
}

Второй дочерний компонент

import { Component } from '@angular/core';

@Component({
  selector: 'cmp-2',
  template: ''
})
export class Cmp2Component  {
  public data: any[] = [
    {
      name: "component 2",
      action: "something else",
      status: "not alive"
    }
  ]
}

Mainиспользование компонента ViewChildren для получения данных

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('cmp1') component1: Cmp1Component;
  @ViewChild('cmp2') component2: Cmp2Component;
}

соответствующий html и css

<cmp-1 #cmp1></cmp-1>
<cmp-2 #cmp2></cmp-2>

<h1>Here's the data from the components</h1>

<hr>

<h3>Component 1</h3>

<div class="box">
  <div class="item" *ngFor="let data of component1.data">
    <div>{{data.name}}</div>
    <div>{{data.action}}</div>
    <div>{{data.status}}</div>
  </div>
</div>

<hr>

<h3>Component 2</h3>

<div class="box">
  <div class="item" *ngFor="let data of component2.data">
    <div>{{data.name}}</div>
    <div>{{data.action}}</div>
    <div>{{data.status}}</div>
  </div>
</div>

.box{
  display: flex;
  flex-direction: column;
}

ПРИМЕЧАНИЕ Я не проверял, существуют ли оба компонента,в этом примере, потому что я знаю это наверняка, поскольку все это просто в статическом контексте.Обязательно проверьте их, если вы ввели, прежде чем выполнять какую-то логику.

Рабочий стек стека: https://stackblitz.com/edit/angular-n1tunk

Answer 2

Два способа, которые я знаю и рекомендую.

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

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

Я бы порекомендовал первое решение с привязками вывода

Answer 3

Служба не является правильным решением в вашем случае.

Вы должны иметь объект данных в родительском компоненте и передавать его как вход всем дочерним компонентам (шагам).

Редактировать :

Пример кода:

Parent :

Определить объект данных в родительском компоненте:

data = {};

Передать объект данных дочернему компоненту первого шага в родительском шаблоне:

<mat-horizontal-stepper #stepper>
  <mat-step [stepControl]="stepOne">
    <ng-template matStepLabel><span class="someClass">Customer Information</span></ng-template>
    <step-one [data]="data"></-step-one>
  </mat-step>
  ...

Дочерний :

Определить @Inputобъект данных, получаемый от родителя:

@Input() data: {};

Сводка : Таким образом, все дочерние элементы будут работать с объектом данных родителя и один раз представлены вродительский компонент, данные есть.

Answer 4

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

вот угловые документы для этого. Документы

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

Тогда у вас должны быть все данные, когда они вам нужны, в конце степпера.

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