Angular的:host、:host-context、::ng-deep選擇器怎么使用

這篇文章主要介紹“Angular的:host、:host-context、::ng-deep選擇器怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Angular的:host、:host-context、::ng-deep選擇器怎么使用”文章能幫助大家解決問題。

一、 :host

:host 表示選擇當前的組件。

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 h2 定位組件視圖內的 h2 標簽

:host h2 {
	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 中的所有子 h4 元素，包括當前組件中使用第三方組件的 h4 元素

:host ::ng-deep h4 {
  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 樣式應用到本組件內部的所有 <h3> 元素中。

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

3.3 可以在:host-context后面添加選擇器以選擇子元素

例如：:host-context h2 定位組件視圖內的 h2 標簽

:host-context h2{
    color: hotpink;
}

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

h2{
    color: hotpink;

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

關于“Angular的:host、:host-context、::ng-deep選擇器怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。