Angular2 0如何把CSS樣式載入進元件中？

上述作用域規則對所有這些載入模式都適用。

我們可以給@component裝飾器新增乙個styles陣列型屬性。這個陣列中的每乙個字串（通常也只有乙個）定義乙份 css。

copy code

@component
(']
})
export

class

我們也可以把它們放到activate

})

我們還可以通過給元件的@component裝飾器中新增乙個styleurls屬性來從外部 css 檔案中載入樣式：

copy code

@component
()
export

class
herodetailscomponent

像 webpack 這類模組打包器的使用者可能會使用styles屬性來在構建時從外部檔案中載入樣式。它們可能這樣寫：

styles: [require('my.component.css')]

注意，這時候我們是在設定styles屬性，而不是styleurls屬性！是模組打包器在載入 css 字串，而不是 angular。 angular 看到的只是打包器載入它們之後的 css 字串。對 angular 來說，這跟我們手寫了styles陣列沒有任何區別。要了解這種 css 載入方式的更多資訊，請參閱相應模組打包器的文件。

我們也可以在元件的 html 模板中嵌入標籤。

像styleurls標籤一樣，這個 link 標籤的href指向的 url 也是相對於應用的根目錄的，而不是元件檔案。

copy code

@component
()

我們還可以利用標準的 css@import規則來把其它 css 檔案匯入到我們的 css 檔案中。

在這種情況下，url 是相對於我們執行匯入操作的 css 檔案的。

copy code

@import
'hero-details-box.css'
;

把元件的** (ts/js)、html 和 css 分別放到同乙個目錄下的三個不同檔案，是乙個常用的實踐：

copy code

quest -summary .component.ts quest -summary .component .html quest -summary .component

.css

我們會通過設定元資料的templateurl和styleurls屬性把模板和 css 檔案包含進來。既然這些檔案都與元件（**）檔案放在一起，那麼通過名字，而不是到應用程式根目錄的全路徑來指定它，就會是乙個漂亮的方式。

通過把元件元資料的moduleid屬性設定為module.id，我們可以更改 angular 計算完整 url 的方式

copy code

@component
()
export

class
questsummarycomponent

Angular2 0如何把CSS樣式載入進元件中？

angular2 0定義指令

angular2 0使用元件樣式

angular2 0 環境搭建

Angular2 0如何把CSS樣式載入進元件中？

angular2 0定義指令

angular2 0使用元件樣式

angular2 0 環境搭建

相關推薦