屬性指令與組件樣式？

Question

Angular 2：何時使用屬性指令以及何時使用組件樣式？

在official Angular 2 Docs中描述的有兩種主要的方式來設計Angular 2中的元素。

• 屬性指令
• 組件樣式

組件樣式可以用這些方式implementated：（模板內聯樣式，在元數據中，模板鏈接標籤樣式的URL，CSS @imports）

我感興趣的是何時使用哪些方式將元素應用於元素。

由於它們都在官方文檔中提到，它們中的每一個都可能最適合在某些情況下使用（在某些情況下甚至是模板內聯樣式??）？

文檔演示屬性指令正在響應用戶事件。他們演示沒有事件的組件樣式。

這是否意味着在大多數情況下，在應用樣式以響應事件時使用屬性指令以及在沒有事件應用樣式時的組件樣式是一種很好的做法？

Answer 1

官方風格指南（https://angular.io/docs/ts/latest/guide/style-guide.html）建議分離樣式和模板時，它包含超過3線（https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-04）

Answer 2

從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中的這個例子中，它又是一個事件（鼠標懸停）。

所以我認爲他們認爲最好在涉及事件時使用屬性指令。

我只是學習角2所以我不知道在造型每種方法的優點和缺點，但這裏有一些可能的那些我能想到的：屬性指令

可能帶來的好處了CSS

• 選擇器可能比全局css選擇器（全局css選擇器可能會變得凌亂，而不是如果不正確地選擇想要的元素）更傻。
• （我認爲）你將屬性指令導入到組件中，以演示使用它的意圖（可讀性）。
• 屬性指令不是全局的，你必須導入它才能使用它。

在CSS屬性的指令可能的利弊

• 然而，屬性指令是多一點點的代碼，並可能是一個單獨的文件是最好的做法，所以它可能會多一點「重」。