App下載

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

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

:host 與 ::ng-deep

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

::ng-deep 可以忽略中間 className 的嵌套層級關系。直接找到你要修改的 className。

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

: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;
}

不過官方文檔上說，ng-deep 在未來的版本中將被放棄，不知道未來會變成什么樣的語法。使用的時候，記得為未來 Angular 升級帶來的變化做準備。

:host-context

::ng-deep 當你沒有編寫組件并且無法訪問其源代碼時,通常需要這樣做,但是 :host-context 當你這樣做時,它可能是一個非常有用的選項.

例如,我<h1>在我設計的組件中有一個黑色標題,我希望能夠在黑暗的主題背景上顯示時將其更改為白色.

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

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

但相反,:host-context您可以在組件內執(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 應用于 h1.這是一個很好的選擇,過分依賴 ::ng-deep,而往往是必要的反模式.

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

官網資料

特殊的選擇器

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

:host

使用 :host 偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內部的元素）。

src/app/hero-details.component.css

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

:host 選擇是是把宿主元素作為目標的唯一方式。除此之外，你將沒辦法指定它， 因為宿主不是組件自身模板的一部分，而是父組件模板的一部分。

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

下一個例子再次把宿主元素作為目標，但是只有當它同時帶有 active CSS 類的時候才會生效。

src/app/hero-details.component.css

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

:host-context

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

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

在下面的例子中，只有當某個祖先元素有 CSS 類 theme-light 時，才會把 background-color 樣式應用到組件內部的所有 <h2> 元素中。

src/app/hero-details.component.css

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

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

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

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

這個例子以所有的 <h3> 元素為目標，從宿主元素到當前元素再到 DOM 中的所有子元素：

src/app/hero-details.component.css

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

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

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

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


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


AngularJS

0 人點贊