Angular2 - 如何在多个页面上重用相同的模型驱动器表单

时间:2016-12-25 22:23:56

标签: angular components angular2-forms

我构建了一个包含一个人4个属性的表单:

firstName, lastName, email, mobile

该表单可以在应用程序的许多地方使用。我见过的所有教程都显示了可重用的组件,但仅作为相关父组件的子组件。例如:

/customers <- renders a list of customers, select one and
/customers/1 <- renders a customer detail, with a customer form

但如果我也有:

/contacts <- renders a list of contacts
/contacts/1 <- renders a detail, with a contact form

但是客户和联系表单是相同的,具有相同的四个字段/控件(但显然会保存/更新到不同的API)。

是否有可能创建一个通用的“人”。可以订阅服务的表单 - 当表单放在客户页面上时,注入客户服务,当放在联系页面上时,注入联系服务。

然后表单可以将更改的数据保存回正确的服务。

我没见过任何这种表单重用的例子。这可能吗?

1 个答案:

答案 0 :(得分:2)

如果我理解你的问题,那么你可以提出的问题是:我可以有条件地注入服务吗?答案是肯定的。你可以通过以下几种方式做到这一点。

一种方法是扩展组件,如THIS。但这对我来说有点难看。

我过去解决这个问题的方法是将两个服务注入到您的组件中,但有条件地subscribe()注入它们。在您的情况下,您可以通过阅读contactscustomers的路线参数来完成此操作。

此外,根据您的实施情况,您可以考虑将表单设为一个单独的组件,并通过customer装饰器传递contact@Input