App下載

AngularJS中的:host 、:host-context、::ng-deep詳解

猿友 2021-02-19 16:51:04 瀏覽數(shù) (10143)
反饋

:host 與 ::ng-deep

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

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

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

:host ::ng-deep .className{
    新的樣式......
}
:host {
     background: #F1F1F1;
     overflow: hidden;
     padding: 24px;
     display: block;
}
 
.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

不過(guò)官方文檔上說(shuō)，ng-deep 在未來(lái)的版本中將被放棄，不知道未來(lái)會(huì)變成什么樣的語(yǔ)法。使用的時(shí)候，記得為未來(lái) Angular 升級(jí)帶來(lái)的變化做準(zhǔn)備。

:host-context

::ng-deep 當(dāng)你沒(méi)有編寫組件并且無(wú)法訪問(wèn)其源代碼時(shí),通常需要這樣做,但是 :host-context 當(dāng)你這樣做時(shí),它可能是一個(gè)非常有用的選項(xiàng).

例如,我<h1>在我設(shè)計(jì)的組件中有一個(gè)黑色標(biāo)題,我希望能夠在黑暗的主題背景上顯示時(shí)將其更改為白色.

如果我無(wú)法訪問(wèn)源代碼,我可能必須在父代的 css 中執(zhí)行此操作:

.theme-dark widget-box ::ng-deep h1 { color: white; }

但相反,:host-context您可以在組件內(nèi)執(zhí)行此操作.SCSS代碼

h1 
 {
     color: black;       // default color
     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }
     // OR set an attribute 'outside' with [attr.theme]="'dark'"
     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

這將查看組件鏈中的任何位置,.theme-dark 如果找到,則將 css 應(yīng)用于 h1.這是一個(gè)很好的選擇,過(guò)分依賴 ::ng-deep,而往往是必要的反模式.

在這種情況下,它&被替換為h1(這就是sass/scss的工作方式),因此您可以將"正常"和主題/替代 css 緊挨著定義,這非常方便.

官網(wǎng)資料

特殊的選擇器

組件樣式中有一些從影子(Shadow) DOM 樣式范圍領(lǐng)域引入的特殊選擇器：

:host

使用 :host 偽類選擇器，用來(lái)選擇組件宿主元素中的元素（相對(duì)于組件模板內(nèi)部的元素）。

src/app/hero-details.component.css

:host {
  display: block;
  border: 1px solid black;
}

:host 選擇是是把宿主元素作為目標(biāo)的唯一方式。除此之外，你將沒(méi)辦法指定它， 因?yàn)樗拗鞑皇墙M件自身模板的一部分，而是父組件模板的一部分。

要把宿主樣式作為條件，就要像函數(shù)一樣把其它選擇器放在 :host 后面的括號(hào)中。

下一個(gè)例子再次把宿主元素作為目標(biāo)，但是只有當(dāng)它同時(shí)帶有 active CSS 類的時(shí)候才會(huì)生效。

src/app/hero-details.component.css

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

:host-context

有時(shí)候，基于某些來(lái)自組件視圖外部的條件應(yīng)用樣式是很有用的。 例如，在文檔的 <body> 元素上可能有一個(gè)用于表示樣式主題 (theme) 的 CSS 類，你應(yīng)當(dāng)基于它來(lái)決定組件的樣式。

這時(shí)可以使用 :host-context() 偽類選擇器。它也以類似 :host() 形式使用。它在當(dāng)前組件宿主元素的祖先節(jié)點(diǎn)中查找 CSS 類， 直到文檔的根節(jié)點(diǎn)為止。在與其它選擇器組合使用時(shí)，它非常有用。

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

src/app/hero-details.component.css

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

已廢棄 /deep/、>>> 和 ::ng-deep

組件樣式通常只會(huì)作用于組件自身的 HTML 上。

把偽類 ::ng-deep 應(yīng)用到任何一條 CSS 規(guī)則上就會(huì)完全禁止對(duì)那條規(guī)則的視圖包裝。任何帶有 ::ng-deep 的樣式都會(huì)變成全局樣式。為了把指定的樣式限定在當(dāng)前組件及其下級(jí)組件中，請(qǐng)確保在 ::ng-deep 之前帶上 :host 選擇器。如果 ::ng-deep 組合器在 :host 偽類之外使用，該樣式就會(huì)污染其它組件。

這個(gè)例子以所有的 <h3> 元素為目標(biāo)，從宿主元素到當(dāng)前元素再到 DOM 中的所有子元素：

src/app/hero-details.component.css

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

/deep/ 組合器還有兩個(gè)別名：>>> 和 ::ng-deep。

/deep/ 和 >>> 選擇器只能被用在仿真 (emulated) 模式下。 這種方式是默認(rèn)值，也是用得最多的方式。 

CSS 標(biāo)準(zhǔn)中用于 "刺穿 Shadow DOM" 的組合器已經(jīng)被廢棄，并將這個(gè)特性從主流瀏覽器和工具中移除。 因此，我們也將在 Angular 中移除對(duì)它們的支持（包括 /deep/、>>> 和 ::ng-deep）。 目前，建議先統(tǒng)一使用 ::ng-deep，以便兼容將來(lái)的工具。


推薦好課：小白學(xué)前端：Angular入門、Angular教程


AngularJS

0 人點(diǎn)贊