在Angular HTML代码中格式化大量HTML属性的最佳方法是什么？

Question

有时候一些 Angular 指令需要很多参数。在我的当前项目中，我遇到了很多不同的格式化代码的方式。

在 Angular 项目中应该使用哪种类型的格式化呢？

<abc-table-widget aaa="aaa"
                  bbbb="bbbb"
                  widget="tableWidget"
                  ccc-id="{{ ccc.data.id }}"
                  ddd-id="{{ ddd.data.id }}"
                  eee-active="currentTab === TAB_EEE"
                  behavior="ACCORDION"
                  resource-type="{{ getResourceType() }}">
</abc-table-widget>

2

<abc-table-widget 
    aaa="aaa"
    bbbb="bbbb"
    widget="tableWidget"
    ccc-id="{{ ccc.data.id }}"
    ddd-id="{{ ddd.data.id }}"
    eee-active="currentTab === TAB_EEE"
    behavior="ACCORDION"
    resource-type="{{ getResourceType() }}">
</abc-table-widget>

3

<abc-table-widget aaa="aaa" bbbb="bbbb" widget="tableWidget" 
    ccc-id="{{ ccc.data.id }}" ddd-id="{{ ddd.data.id }}"
    eee-active="currentTab === TAB_EEE" behavior="ACCORDION" 
    resource-type="{{ getResourceType() }}"></abc-table-widget>

4

<abc-table-widget aaa="aaa" bbbb="bbbb" widget="tableWidget" ccc-id="{{ ccc.data.id }}" ddd-id="{{ ddd.data.id }}" eee-active="currentTab === TAB_EEE" behavior="ACCORDION" resource-type="{{ getResourceType() }}"> </abc-table-widget>

- trikoder_beta

---

这主要是基于个人观点，但当你有类似的问题时，应该考虑代码的可读性和可维护性，对你来说越易读越好。 - maurycy

Answer 1

这基本上是关于你自己喜好的问题。老实说，我建议你很快忘记你的第三个和第四个例子。

我认为你的第二种解决方案是正确的方法。像示例1中那样为你的参数创建这么多选项卡似乎有点过度。

如果您查看w3schools的HTML编码指南，您会发现他们也是这样做的。

http://www.w3schools.com/html/html5_syntax.asp

编辑：w3schools.com 上没有这样的内容，但在这里可以找到：http://www.quepublishing.com/articles/article.aspx?p=24011&seqNum=3

- FKutsche

---

如果你查看 w3schools 的 HTML 编码指南，你会发现他们也是这么做的。但我没有看到将多个属性拆分成多行的示例。 - trikoder_beta

你是对的，请看这里：http://www.quepublishing.com/articles/article.aspx?p=24011&seqNum=3 - FKutsche