這篇文章帶大家深入了解一下angular中的幾個特殊選擇器:host、:host-context、::ng-deep,希望對大家有幫助!
:host
#:host 表示選擇目前的元件。 【相關教學推薦:《angular教學》】
#1.1 選擇宿主元素
##使用:host 偽類選擇器,用來選擇元件
宿主元素中的元素(相對於元件模板內部的元素),沒有子元素就相當於選擇整個
宿主元素。
<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
標籤<pre class="brush:css;toolbar:false;">:host h1 {
color:red;
}</pre>
1.3 有條件的選擇宿主元素#把宿主當作目標,同時帶有active 的class 類別的時候才會生效
:host(.active){ border-width: 3px; }
像這樣:
<app-detail class="active"></app-detail>二、
在使用一些第三方的元件的時候,要修改元件的樣式,這種情況下使用.
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;
}
宿主元素的
祖先
節點中尋找 CSS 類,直到文件的根節點為止。如果
找到,才會套用後面的樣式到本元件
內部元素。
3.1 選擇元件宿主元素中的元素#:host-context {
color:red;
}
3.2 把宿主當作目標,同時帶有active的class類別的時候才會生效在下面的例子中,只有當某個
祖先元素(宿主元素也可以)有CSS 類別theme-light
時,才會把background-color
樣式應用到本元件內部
的所有c1a436a314ed609750bd7c7d319db4da
元素中。 <pre class="brush:css;toolbar:false;">:host-context(.theme-light) h2 {
background-color: #eef;
}</pre>
3.3 可以在:host-context後面新增選擇器以選擇子元素例如:
:host-context h1 定位元件視圖內的h1
標籤<pre class="brush:css;toolbar:false;">:host-context h1{
color: hotpink;
}</pre>
#3.4 可用來某個樣式內部條件判斷##h1{
color: hotpink;
:host-context(.active) &{
color: yellow;
}
}
更多程式相關知識,請造訪:程式設計教學
以上是Angular的:host、:host-context、::ng-deep選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!