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

創(chuàng)新互聯(lián)是一家成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，定制網(wǎng)站開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)公司，公司2013年成立是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開(kāi)發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專業(yè)建議和思路。

一、 :host

:host 表示選擇當(dāng)前的組件。

1.1 選擇宿主元素

使用 :host 偽類選擇器，用來(lái)選擇組件宿主元素中的元素（相對(duì)于組件模板內(nèi)部的元素），沒(méi)有子元素就相當(dāng)于選擇整個(gè)宿主元素。

如有下面html:

<app-detail></app-detail>

組件 app-detail 的樣式（整個(gè)app-detail 的樣式）如下 ：

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

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

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

可以看得出來(lái)，:host 直接作用于宿主元素本身

1.2 選擇宿主元素的子元素

可以在 :host 后面添加選擇器以選擇子元素。例如：:host h2 定位組件視圖內(nèi)的 h2 標(biāo)簽

:host h2 {
	color:red;
}

1.3 有條件的選擇宿主元素

把宿主作為目標(biāo)，同時(shí)帶有 active 的 class 類的時(shí)候才會(huì)生效

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

像這樣：

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

二、 ::ng-deep

::ng-deep 可以忽略中間 className 的嵌套層級(jí)關(guān)系。直接找到你要修改的 className。

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

2.1 從宿主元素到當(dāng)前元素再到 DOM 中的所有子 h4 元素，包括當(dāng)前組件中使用第三方組件的 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

如果需要滿足某條件才能應(yīng)用樣式。它在當(dāng)前組件宿主元素的祖先節(jié)點(diǎn)中查找 CSS 類，直到文檔的根節(jié)點(diǎn)為止。如果找到，才會(huì)應(yīng)用后面的樣式到本組件內(nèi)部元素。

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

:host-context {
	color:red;
}

3.2 把宿主作為目標(biāo)，同時(shí)帶有active的class類的時(shí)候才會(huì)生效

在下面的例子中，只有當(dāng)某個(gè)祖先元素(宿主元素也可以)有 CSS 類 theme-light 時(shí)，才會(huì)把 background-color 樣式應(yīng)用到本組件內(nèi)部的所有 <h3> 元素中。

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

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

例如：:host-context h2 定位組件視圖內(nèi)的 h2 標(biāo)簽

:host-context h2{
    color: hotpink;
}

3.4 可用于某個(gè)樣式內(nèi)部條件判斷

h2{
    color: hotpink;

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

關(guān)于“Angular的:host、:host-context、::ng-deep選擇器怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

名稱欄目：Angular的:host、:host-context、::ng-deep選擇器怎么使用
網(wǎng)頁(yè)鏈接：http://jinyejixie.com/article28/ggejcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、企業(yè)網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)