日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

本篇文章帶大家深入了解一下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 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;
    }
}


分享到:
標簽:Angular :host選擇器 :host-context選擇器 ::ng-deep選擇器
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定