有没有办法将一个通用表单模板用于多种角度形式答案

【问题标题】：Is there a way to use one general form template for multiple angular forms有没有办法将一个通用表单模板用于多种角度形式
【发布时间】：2017-09-22 21:41:27
【问题描述】：

我正在开发一个 Angular 2 项目，并有一个通用表单模板，我希望将其用于大约 5 个表单，因为它们都将使用相同的 html。我选择这样做是为了防止创建具有重复 html 结构的多个模板。

这些字段（包括小部件类型）是来自服务器的数据模型的一部分。在我的通用表单组件中，这些小部件类型用于返回小部件的 html。在我的模板内部，innerHTML 指令获取返回的 html 并将其呈现在视图中。模板对表单控件一无所知。它只是从服务器接收表单数据，并呈现结果。此模板不仅用于常规表单，还用于过滤器，因为过滤器只是另一种表单。还有一个通用的过滤器组件扩展了表单组件。

所以对于我的过滤器，我希望能够将这些字段绑定到我的数据以过滤项目列表。问题在于，由于小部件的 html 在组件内部呈现，并在视图中使用 innerHTML 添加到 dom，因此无法在输入上使用 ngModel。也许这样做的一种方法可能是在模板内使用 ngSwitch 根据小部件类型呈现正确的小部件，但我不确定。

【问题讨论】：

标签： angular angular2-template angular2-forms

【解决方案1】：

您可以为此制作一个通用的表单组件，并根据需要使用该组件。

如果您无法制作通用组件，您也可以为您创建的任何组件使用完全相同的 html 模板。假设你有comp1 和comp2

@Component({
    selector: 'comp1',
    templateUrl: 'MyGenericTemplate.html'
})

@Component({
    selector: 'comp2',
    templateUrl: 'MyGenericTemplate.html'
})

【讨论】：

太棒了！非常感谢！在这种情况下如何使用 ngModel 进行绑定？我必须绑定到两个表单上的相同对象吗？
假设您在模板中有一个名为 var1 的变量，那么组件中也必须有该变量。实际上组件和模板文件在编译时合并为一个文件。但我不明白为什么你不能简单地为所有人提供一个组件？只需制作一个通用组件。我认为不需要为多个组件做一个模板。我猜你做错了什么。