通过表单向导导航时保留用户输入数据（表单）的最佳方法是什么？

Question

我正在使用 Angular2：

我正在开发基于以下内容的表单向导：

1) 每个wizardstep(screen) 都与它自己的组件相关联，该组件呈现一个单独的子表单()，并附加了ngFormControl 绑定。

2) 应用路由器/路由通过表单向前移动

3) 用户输入数据在每个表单上单独验证 [*]

4) 用户输入数据将被持久化，即在用户确认后（在最后一个向导步骤中）被发送到 API。

[*] 我将来可能会有一些跨表单的验证规则，它们跨越多个页面，即表单。目前，这超出了我的问题的范围

我希望用户通过向导步骤来回导航将保留他的用户输入数据。 在 Angular2 中最好的方法是什么？

（到目前为止，我已经在网上搜索过，但没有成功找到关于我的问题的建议（特定于 angular2）。）

Answer 1

最好的方法是使用向导中涉及的所有组件通用的共享数据服务。

export class SharedDataService {
  wizardData: any;
}

为此，您可以在使用所有这些的父组件的提供者中进行设置：

@Component({
  (...)
  providers: [ SharedDataService ] // <----
}

您也可以在引导应用程序时指定它，但它会被所有应用程序共享：

bootstrap(AppComponent, [ SharedDataService ]);

有关详细信息，请参阅此文档：

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service