2

我的问题是设计问题：

我想实现一个多步骤表单。因此，例如，如果我有 4 个步骤，那么我有 4 个组件，其中每个组件都是多步骤表单中的一个步骤

有一个父组件将其内部的视图与活动的步骤组件进行切换

选项1

在父组件和每个子组件之间使用双向绑定。确认表单后（最后一步），我可以在父组件中使用表单数据。例如：

<div class="tab-content">
  <personal-step 
    *ngIf="currentStep == 'personalStep'"
    [(personal)]="personalData"></personal-step>
  <work-step 
    *ngIf="currentStep == 'workStep'"
    [(work)]="workData"></work-step>
  <address-step 
    *ngIf="currentStep == 'addressStep'"
    [(address)]="addressData"></address-step>
  <confirmation-step 
    *ngIf="currentStep == 'confirmationStep'"
    (confirm)="formConfirmed()"></confirmation-step>
</div>

选项#2

使用 FormDataService 将被注入到每个子组件中。步骤的呈现将通过路由机制完成。确认表单后（最后一步），我可以在 ConfirmationComponent 或我的父组件中使用注入的 FormDataService 并使用表单数据

<div class="tab-content">
  <!-- Routed view  -->
  <router-outlet></router-outlet>
</div>

和一个 FormDataService

export class FormDataService {
  private formData: FormData = new FormData();
  getPersonal(): Personal {
    return this.formData.personal
  }

  setPersonal(data: Personal) {
    this.formData.personal = data;
  }

  getWork(): Work {
    return this.formData.work
  }

  setWork(data: Work) {
    this.formData.work = data;
  }

  getAddress(): Address {
    return this.formData.address
  }

  setAddress(data: Address) {
    this.formData.address = data;
  }
}

我想知道您是否可以帮我找出每种方法的优缺点，并分享您会采用哪种方法

谢谢

4

0 回答 0