Angular的:host、:host-context、::ng-deep選擇器

這篇文章帶大家深入了解angular中的幾個特殊選擇器:host、:host-context、::ng-deep，希望對大家有幫助！

一、 :host

:host 表示選擇目前的元件。 【相關教學推薦：《angular教學》】

1.1 選擇宿主元素

使用:host偽類選擇器，用來選擇元件宿主元素中的元素（相對於元件模板內部的元素），沒有子元素就相當於選擇整個宿主元素。

如有下面html:

 <app-detail></app-detail>

元件app-detail的樣式（整個app-detail的樣式）如下：

 :host {
display: inline-block;
background: red;
}

瀏覽器Elements選擇app-detail元素， Style 如下：

 [_nghost-wtd-c445] {
display: inline-block;
background-color: red;
}

可以看得出來， :host直接作用於宿主元素本身

1.2 選擇宿主元素的子元素

可以在:host後面新增選擇器以選擇子元素。例如： :host h1定位元件檢視內的h1標籤

:host h1 {
	color:red;
}

1.3 有條件的選擇宿主元素

把宿主當作目標，同時帶有active 的class 類別的時候才會生效

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

像這樣：

 <app-detail class="active"></app-detail>

二、 ::ng-deep

::ng-deep 可以忽略中間className 的嵌套層級關係。直接找到你要修改的className。

在使用一些第三方的組件的時候，要修改組件的樣式,這種情況下使用.

2.1 從宿主元素到目前元素到DOM 中的所有子h3 元素，包括目前元件中使用第三方元件的h3 元素

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

2.2 搜尋某類型下面的特定類型

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
height: 120px;
margin-top: -16px;
}

三、 :host-context

如果需要滿足某條件才能套用樣式。它在目前元件宿主元素的祖先節點中尋找CSS 類，直到文件的根節點為止。如果找到，才會套用後面的樣式到本组件內部元素。

3.1 選擇組件宿主元素中的元素

:host-context {
	color:red;
}

3.2 把宿主當作目標，同時帶有active的class類別的時候才會生效

在下面的例子中，只有當某個祖先元素(宿主元素也可以)有CSS 類別theme-light時，才會把background-color樣式應用到本组件内部的所有<h2>元素中。

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

3.3 可以在:host-context後面新增選擇器以選擇子元素

例如： :host-context h1定位元件檢視內的h1標籤

:host-context h1{
color: hotpink;
}

3.4 可用於某個樣式內部條件判斷

h1{
color: hotpink;

:host-context(.active) &{
color: yellow;
}
}