溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JS中的:host ，:host-context和::ng-deep怎么用”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“JS中的:host ，:host-context和::ng-deep怎么用”文章能幫助大家解決問題。
:host 表示選擇當(dāng)前的組件。
::ng-deep 可以忽略中間 className 的嵌套層級關(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;
}不過官方文檔上說，ng-deep 在未來的版本中將被放棄，不知道未來會(huì)變成什么樣的語法。使用的時(shí)候，記得為未來 Angular 升級帶來的變化做準(zhǔn)備。
::ng-deep 當(dāng)你沒有編寫組件并且無法訪問其源代碼時(shí),通常需要這樣做,但是 :host-context 當(dāng)你這樣做時(shí),它可能是一個(gè)非常有用的選項(xiàng).
例如,我<h2>在我設(shè)計(jì)的組件中有一個(gè)黑色標(biāo)題,我希望能夠在黑暗的主題背景上顯示時(shí)將其更改為白色.
如果我無法訪問源代碼,我可能必須在父代的 css 中執(zhí)行此操作:
.theme-dark widget-box ::ng-deep h2 { color: white; }但相反,:host-context您可以在組件內(nèi)執(zhí)行此操作.SCSS代碼
h2
{
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)用于 h2.這是一個(gè)很好的選擇,過分依賴 ::ng-deep,而往往是必要的反模式.
在這種情況下,它&被替換為h2(這就是sass/scss的工作方式),因此您可以將"正常"和主題/替代 css 緊挨著定義,這非常方便.
組件樣式中有一些從影子(Shadow) DOM 樣式范圍領(lǐng)域引入的特殊選擇器：
使用 :host 偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內(nèi)部的元素）。
src/app/hero-details.component.css
:host {
display: block;
border: 1px solid black;
}:host 選擇是是把宿主元素作為目標(biāo)的唯一方式。除此之外，你將沒辦法指定它， 因?yàn)樗拗鞑皇墙M件自身模板的一部分，而是父組件模板的一部分。
要把宿主樣式作為條件，就要像函數(shù)一樣把其它選擇器放在 :host 后面的括號中。
下一個(gè)例子再次把宿主元素作為目標(biāo)，但是只有當(dāng)它同時(shí)帶有 active CSS 類的時(shí)候才會(huì)生效。
src/app/hero-details.component.css
:host(.active) {
border-width: 3px;
}有時(shí)候，基于某些來自組件視圖外部的條件應(yīng)用樣式是很有用的。 例如，在文檔的 <body> 元素上可能有一個(gè)用于表示樣式主題 (theme) 的 CSS 類，你應(yīng)當(dāng)基于它來決定組件的樣式。
這時(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)部的所有 <h3> 元素中。
src/app/hero-details.component.css
:host-context(.theme-light) h3 {
background-color: #eef;
}組件樣式通常只會(huì)作用于組件自身的 HTML 上。
把偽類 ::ng-deep 應(yīng)用到任何一條 CSS 規(guī)則上就會(huì)完全禁止對那條規(guī)則的視圖包裝。任何帶有 ::ng-deep 的樣式都會(huì)變成全局樣式。為了把指定的樣式限定在當(dāng)前組件及其下級組件中，請確保在 ::ng-deep 之前帶上 :host 選擇器。如果 ::ng-deep 組合器在 :host 偽類之外使用，該樣式就會(huì)污染其它組件。
這個(gè)例子以所有的 <h4> 元素為目標(biāo)，從宿主元素到當(dāng)前元素再到 DOM 中的所有子元素：
src/app/hero-details.component.css
:host ::ng-deep h4 {
font-style: italic;
}/deep/ 組合器還有兩個(gè)別名：>>> 和 ::ng-deep。
/deep/ 和 >>> 選擇器只能被用在仿真 (emulated) 模式下。 這種方式是默認(rèn)值，也是用得最多的方式。
CSS 標(biāo)準(zhǔn)中用于 "刺穿 Shadow DOM" 的組合器已經(jīng)被廢棄，并將這個(gè)特性從主流瀏覽器和工具中移除。 因此，我們也將在 Angular 中移除對它們的支持（包括 /deep/、>>> 和 ::ng-deep）。 目前，建議先統(tǒng)一使用 ::ng-deep，以便兼容將來的工具。
關(guān)于“JS中的:host ，:host-context和::ng-deep怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼