属性指令VS组件样式？

Question

Angular 2：何时使用属性指令以及何时使用组件样式？

在official Angular 2 Docs中描述的Angular 2中，有两种主要方式来设置元素的样式。

• 属性指令
• 组件样式

组件样式可以通过以下方式实现:(模板内联样式，元数据中的样式URL，模板链接标记，CSS @导入）

我对使用哪种方式将样式应用于元素感兴趣。

由于他们在官方文档中都提到过，因此在某些情况下（即使在某些情况下使用模板内联样式），它们中的每一个都可能最好使用？

docs demo属性指令响应用户事件。他们演示没有事件的组件样式。

这是否意味着在大多数情况下，在应用样式以响应事件时使用属性指令以及在没有事件的情况下应用样式时使用组件样式是一种好习惯？

Answer 1

我刚发现的official angular 2 style guide的另一个暗示：

style 06-01

  

当你有没有的表示逻辑时，请使用属性指令   模板。

我能想到没有模板的表示逻辑的唯一原因是使它可以在多个组件中使用。

我们可以使用:hover轻松定义全局css样式，并在一对多模板中使用它。那也是

  

没有模板的演示逻辑

使用上的差异是：

<div tohHighlight>Bombasta</div> vs <div class="tohHighlight">Bombasta</div>

我无法真正看到一方面的优势，但Angular 2官方文档始终使用事件演示属性指令，对于任何不涉及事件的样式，它们都使用css。

在样式06-01的这个示例中，它再次出现在事件中（鼠标悬停）。

所以我认为他们认为在涉及事件时最好使用属性指令。

我只是在学习Angular 2，所以我不确定每种造型方法的优缺点，但这里有一些我能想到的可能：

属性指令优于css的可能好处

• 选择器可能比全局css选择器更加简单（全局css选择器可能变得混乱，如果不正确则不选择预期的元素）。
• （我认为）您将属性指令导入到演示使用它的意图的组件中（可读性）。
• 属性指令不是全局的，您必须将其导入才能使用它。

关于css的属性指令的可能缺点

• 但是，属性指令是一个更多的代码，可能是一个单独的文件是最佳实践，所以它可能会更“重”。

Answer 2

官方风格指南（https://angular.io/docs/ts/latest/guide/style-guide.html）建议在样式和模板包含多于3行（https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-04）

时将其分开