在Angular 6中将多个组件中的数据收集到一个的最佳方法 [英] The best way to collect data from multiple components into one in Angular 6

问题描述

我对Angular来说还比较陌生，我知道我的问题可能很原始，但是请为我提供针对我情况的最佳解决方案.

I am relatively new to Angular, and I understand my question might be very primitive, but please advice me the best solution in my case.

我有一个步进器(来自角材料)；每个步骤的内容都包含在不同的组件中；在所有步骤中，我们都使用多个输入字段从客户那里收集数据.

I have a Stepper (from Angular Material); the contents of each step are inside different components; in all the steps we collect data from a customer using multiple input fields.

代码如下.

步进:

<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>

内容(很多类似的字段):

Contents (lots of fields like this):

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

我想要的是收集最后一个确认"控制器中的所有数据，以将其显示给客户.我知道组件之间存在多种通信方式，但是在这种情况下哪一种是最好的? 我尝试使用服务，但是出了点问题.

What I want, is to collect all the data in the last "confirmation" controller, to show it to the customer. I know there are various ways of communication between components, but which one is the best in this case? I've tried using service, but something went wrong.

请给我发送指向可以回答我的问题的任何参考的链接，就足够了.

Please just send me a link to any reference that can answer my question, it should be enough.

感谢您的咨询.

推荐答案

服务在您的情况下不是正确的解决方案.

A service is not the correct solution in your case.

您应该在父组件中具有数据对象，并将其作为输入传递给所有对象子组件(步骤).

You should have the data object in parent component and pass it as an input to all child components (steps).

修改:

示例代码:

父母:

在父组件中定义数据对象:

Define the data object in the parent Component:

data = {};

将数据对象传递给父模板中的第一步子组件:

Pass data object to step-one child component in parent template:

<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数据对象以从父级接收:

Define the @Input data object to receive from parent:

@Input() data: {};

摘要:通过这种方式，所有子项都可以使用父级的数据对象，并且一旦在父级组件中提交，数据就在那里.

Summary: This way, all children will work with the parent's data object, and once submitted in parent component, the data is there.

这篇关于在Angular 6中将多个组件中的数据收集到一个的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！