重构可能复杂的模板答案

【问题标题】：Refactoring potentially complex template重构可能复杂的模板
【发布时间】：2016-10-24 20:39:29
【问题描述】：

让供应商成为文档（带有代码、名称和许多其他字段）。我有一个组件

export class SuppliersDetails  extends MeteorComponent {
  supplier: any;
  invalidKeys: Object; // array <key> => <error message>

还有一个表格

 <div>
     <input [(ngModel)]="supplier.code" [class.invalid]="invalidKeys['code']" id="code" type="text" class="validate">
     <label for="code" [class.active]="supplier.code || invalidKeys['name']" [attr.data-error]="invalidKeys['code']" >Code</label>
 </div>

允许我编辑它。

我如何重构我的组件/模板，以减轻我的模板重量？

这里只有1个字段，只处理invalidKeys消息的显示。但是我有 8 个字段和一些特定的逻辑要添加。这将变得不可读。

我正在寻找类似的东西

<div>
    <input plsDoItAllAndUseThatId='code'></input>
    <label plsDoItAllAndUseThatId='code'>Code</input>
</div>

但我对设计一无所知，有什么想法吗？

【问题讨论】：

您无能为力。您可以将其包装在一个组件中，但使用自定义组件作为表单输入字段（使用[(ngModel)]="..."）也不是一件容易的事。它需要实现ControlValueAccessor，并且需要可配置，以防输入之间的某些事情发生变化。

标签： meteor angular angular2-template angular2-forms

【解决方案1】：

我建议查看 dynamic forms，如 angular2 文档的食谱部分所述。这里的关键是将业务逻辑与表单本身分离，例如通过创建：

将保存所有输入属性的问题对象
一项服务将创建所有生成特定表单所需的所有问题
一个通用组件，它将遍历问题列表并将所有问题属性绑定到输入

【讨论】：

【解决方案2】：

这将是您可以使用属性指令的好时机。

https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#write-directive

你可以把它写成一个属性，就像你在你想做的事情中所做的那样。有了它，您可以根据需要操作指令中的元素来添加其他属性或做任何事情。

这样会很流畅。我是这种东西的粉丝。

如果你有创意，你可以用它做很多很酷的东西。

【讨论】：

我很喜欢这个解决方案。 [class.active]="supplier.code || invalidKeys['name']" [attr.data-error]="invalidKeys['code']" 有什么办法让我保持不变语法来执行我的逻辑，还是我必须使用 oldschool dom 元素操作来设置样式和类？（操作 ElementRef）