實現方式之一，是在元件的元資料中設定styles屬性。styles屬性可以接受乙個包含 css **的字串陣列。 通常我們只給它乙個字串就行了，如同下例：
copy code
@component(']
})export
class
元件樣式在很多方面都不同於傳統的全域性性樣式。
這種模組化相對於 css 的傳統工作方式是乙個巨大的改進：
可以使用對每個元件最有意義的 css 類名和選擇器。
類名和選擇器是僅屬於元件內部的，它不會和應用中其它地方的類名和選擇器出現衝突。
我們元件的樣式不會因為別的地方修改了樣式而被意外改變。
我們可以讓每個元件的 css **和它的 typescript、html **放在一起，這將促成清爽整潔的專案結構。
將來我們可以修改或移除元件的 css **，而不用遍歷整個應用來看它有沒有被別處用到，只要看看當前元件就可以了。
元件樣式中有一些從影子 dom 樣式範圍 (shadow dom style scoping) 領域引入的特殊選擇器：
使用:host偽類選擇器，用來選擇元件宿主元素中的元素（相對於元件模板內部的元素）。
copy code
:
host
這是我們能以宿主元素為目標的唯一方式。除此之外，我們將沒辦法指定它， 因為宿主不是元件自身模板的一部分，而是父元件模板的一部分。
要把宿主樣式作為條件，就要像函式一樣把其它選擇器放在:host後面的括號中。
在下乙個例子中，我們又一次把宿主元素作為目標，但是只有當它同時帶有activecss 類的時候才會生效。
copy code
:
host
(.active
)
有時候，基於某些來自元件檢視外部的條件應用樣式是很有用的。 例如，在文件的元素上可能有乙個用於表示樣式主題 (theme) 的 css 類，而我們應當基於它來決定元件的樣式。
這時可以使用:host-context()偽類選擇器。它也以類似:host()形式使用。它在當前元件宿主元素的祖先節點中查詢 css 類， 直到文件的根節點為止。在與其它選擇器組合使用時，它非常有用。
在下面的例子中，只有當某個祖先元素有 css 類theme-light時，我們才會把background-color樣式應用到元件內部的所有元素中。
copy code
:
host
-context
(.theme
-light
)h2
元件樣式通常只會作用於元件自身的 html 上。
我們可以使用/deep/選擇器，來強制乙個樣式對各級子元件的檢視也生效，它不但作用於元件的子檢視，也會作用於元件的內容。
在這個例子中，我們以所有的元素為目標，從宿主元素到當前元素再到 dom 中的所有子元素：
copy code
:
host
/deep
/h3
/deep/選擇器還有乙個別名>>>。我們可以任意交替使用它們。
/deep/和>>>選擇器只能被用在** (emulated)模式下。 這種方式是預設值，也是用得最多的方式。 更多資訊，見控制檢視封裝模式一節。
angular2 0定義指令
應用繼續演進。首先加入的是highlightdirective，乙個屬性型指令，它會設定所在元素的背景色。copy code import from angular core directive highlight the attached element in gold export class ...
Angular2 0如何把CSS樣式載入進元件中？
上述作用域規則對所有這些載入模式都適用。我們可以給 component裝飾器新增乙個styles陣列型屬性。這個陣列中的每乙個字串 通常也只有乙個 定義乙份 css。copy code component export class 我們也可以把它們放到activate 我們還可以通過給元件的 com...
angular2 0 環境搭建
angular2.0 seed 大漠窮秋改寫版 2.執行 npm install npm start 或者在 angular seed master目錄下寫乙個小指令碼，命名為 start.bat，內容為 npm start 如果是客戶端mock模擬資料，在tools下新增server檔案件tool...