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

Question

我正在使用 Angular2：

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

1) 每个向导步骤（屏幕）都与其自己的组件相关联，呈现一个单独的子表单 () 附加到 ngFormControl 绑定。

2) router/routing 用于通过表格向前移动

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

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

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

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

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

Answer 1

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

export class SharedDataService {
  wizardData: any;
}

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

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

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

bootstrap(AppComponent, [ SharedDataService ]);

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

What is the best way to go for retaining user input data (form) when navigating thru a form wizard?