天天看點

Angular2 元件樣式及host

原文連結:http://blog.csdn.net/u010977147/article/details/53740424

對于我們寫的每個 Angular 元件來說,除了定義 HTML 模闆之外,我們還要定義用于模闆的 CSS 樣式、 指定任意的選擇器、規則和媒體查詢。

實作方式之一,是在元件的中繼資料中設定

styles

屬性。 

styles

屬性可以接受一個包含 CSS 代碼的字元串數組。 通常我們隻給它一個字元串就行了,如同下例:

COPY CODE

@Component({
  selector: 'hero-app',
  template: `
    <h1>Tour of Heroes</h1>
    <hero-app-main [hero]=hero></hero-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}
           

元件樣式在很多方面都不同于傳統的全局性樣式。

首先,我們放在元件樣式中的選擇器,隻會應用在元件自身的模闆中。上面這個例子中的

h1

選擇器隻會對 

HeroAppComponent

模闆中的

<h1>

标簽生效,而對應用中其它地方的

<h1>

元素毫無影響。

這種子產品化相對于 CSS 的傳統工作方式是一個巨大的改進:

  1. 可以使用對每個元件最有意義的 CSS 類名和選擇器。
  2. 類名和選擇器是僅屬于元件内部的,它不會和應用中其它地方的類名和選擇器出現沖突。
  3. 我們元件的樣式不會因為别的地方修改了樣式而被意外改變。
  4. 我們可以讓每個元件的 CSS 代碼和它的 TypeScript、HTML 代碼放在一起,這将促成清爽整潔的項目結構。
  5. 将來我們可以修改或移除元件的 CSS 代碼,而不用周遊整個應用來看它有沒有被别處用到,隻要看看目前元件就可以了。

特殊的選擇器

元件樣式中有一些從影子 DOM 樣式範圍 (Shadow DOM style scoping) 領域引入的特殊選擇器:

:host

使用

:host

僞類選擇器,用來選擇元件宿主元素中的元素(相對于元件模闆内部的元素)。

COPY CODE

:host {
  display: block;
  border: px solid black;
}                

這是我們能以宿主元素為目标的唯一方式。除此之外,我們将沒辦法指定它, 因為宿主不是元件自身模闆的一部分,而是父元件模闆的一部分。

要把宿主樣式作為條件,就要像函數一樣把其它選擇器放在

:host

後面的括号中。

在下一個例子中,我們又一次把宿主元素作為目标,但是隻有當它同時帶有

active

 CSS 類的時候才會生效。

COPY CODE

:host(.active) {
  border-width: px;
}                

:host-context

有時候,基于某些來自元件視圖外部的條件應用樣式是很有用的。 例如,在文檔的

<body>

元素上可能有一個用于表示樣式主題 (theme) 的 CSS 類,而我們應當基于它來決定元件的樣式。

這時可以使用

:host-context()

僞類選擇器。它也以類似

:host()

形式使用。它在目前元件宿主元素的祖先節點中查找 CSS 類, 直到文檔的根節點為止。在與其它選擇器組合使用時,它非常有用。

在下面的例子中,隻有當某個祖先元素有 CSS 類

theme-light

時,我們才會把

background-color

樣式應用到元件内部的所有

<h2>

元素中。

COPY CODE

:host-context(.theme-light) h2 {
  background-color: #eef;
}                

/deep/

元件樣式通常隻會作用于元件自身的 HTML 上。

我們可以使用

/deep/

選擇器,來強制一個樣式對各級子元件的視圖也生效,它不但作用于元件的子視圖,也會作用于元件的内容。

在這個例子中,我們以所有的

<h3>

元素為目标,從宿主元素到目前元素再到 DOM 中的所有子元素:

COPY CODE

:host /deep/ h3 {
  font-style: italic;
}                

/deep/

選擇器還有一個别名

>>>

。我們可以任意交替使用它們。

/deep/

>>>

選擇器隻能被用在仿真 (emulated) 模式下。 這種方式是預設值,也是用得最多的方式。 更多資訊,見控制視圖封裝模式一節。