尝试思考如何在 Angular 2 中构建多步表单

我正在尝试构建一个小型的三步表单。它会类似于这样：

我在 React 中执行此操作的方法是使用 redux 来跟踪表单完成情况并根据步骤号 (0, 1, 2) 渲染表单主体标记。

在 Angular 2 中，什么是做到这一点的好方法？这就是我目前正在尝试的，并且仍在努力。我的方法好吗？有更好的方法吗？

我有一个父组件<app-form>我会在里面筑巢<app-form-header> and <app-form-body>.

<app-form>
  <app-header [step]="step"></app-header>
  <app-body [formData]="formData"></app-body>
</app-form>

In <app-form>组件我有一个step: number and formData: Array<FormData>。步骤只是 formData 中每个对象的索引。这将被传递到标题。 formData 将负责来自用户的表单数据。每次表单输入有效时，用户可以单击“Next”执行 nextStep() 以增加索引。每个步骤都有一个关联的模板标记。

有没有更好的方法来做这样的事情？

不要做得太过分，如果它是一个简单的形式，您不需要使用路由器或服务在步骤之间传递数据。

像这样的事情会做：

<div class="nav">
</div>

<div id="step1" *ngIf="step === 1">
<form></form>
</div>

<div id="step2" *ngIf="step === 2">
<form></form>
</div>

<div id="step3" *ngIf="step === 3">
<form></form>
</div>

它仍然是一个小模板，您可以将所有表单和所有数据保留在一个组件中，如果您愿意，您可以将 ngIf 替换为在 step1,2,3 -div 和 animate 上切换 css-classes 的内容当用户进入下一步时