Angular 2的元件樣式

2021-07-27 13:15:42 字數 664 閱讀 9260

使用styles在元資料中指定樣式

在定義component時可以通過styles欄位指定樣式,styles接受乙個字串陣列,但是通常我們只指定乙個字串就夠了。**如下:

selector: 'my-list',

template: ``,

styles:[`

ul li

`]})

export class itemcomponent,

]} 這樣指定的樣式只有在itemcomponent才會生效,也就避免了與其他地方定義樣式的衝突。

2. 使用styleurls在元資料載入css檔案

使用styleurls屬性可以從外部載入css檔案,**如下:

@component(}

li>

ul>`,

})

下面我們來看下如何為我們的dom元素新增背景顏色。

ul>

@component(}

li>

ul>`,

})

可是如果我們想依據特定的條件來決定是否新增特定樣式,該如何去做呢?

對於上述**我們可以寫做:

Angular2如何修改父子元件樣式

場景 需要根據實際專案需求,修改引入的第三方元件的部分樣式 修改父元件的元素的樣式 一 修改父元件的元素的樣式 host host偽類,這是在元件內部獲取到其宿主元素的唯一方式,會向上一直查詢到根元素body 具體使用方法 預設當前在乙個元件中,該元件位於乙個父元件中,且該元件引入了第三方子元件 以...

Angular2 父元件中修改子元件樣式

情景 父元件fathercomponent中使用了子元件childcomponent,父元件有自己的css檔案,子元件也有自己的css檔案,在父元件中修改了子元件的樣式,但不起作用。檢視html元素的樣式表,發現 定義的樣式後面都加了個 ngcontent c 這是angular為了區分自己的樣式,...

angular2新建元件

1,使用 ng g c hello 建立乙個新的元件 它建立了4個檔案,並更新了 如果想訪問這個元件,只需要新增它的路由 成功訪問這個元件 import語句定義了我們需要用到的哪些模組,import 語句的結構 import from wherever.這種寫法叫解構。解構是 es6和 typesc...