: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中執行此操作:
.theme-dark widget-box ::ng-deep h1 { color: white; }
但相反,:host-context您可以在組件內執行此操作.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 樣式范圍領域（記錄在W3C的CSS Scoping Module Level 1中） 引入的特殊選擇器：
:host
使用?:host?偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內部的元素）。
src/app/hero-details.component.css
:host {display: block;border: 1px solid black;
}:host?選擇是是把宿主元素作為目標的唯一方式。除此之外，你將沒辦法指定它， 因為宿主不是組件自身模板的一部分，而是父組件模板的一部分。
要把宿主樣式作為條件，就要像函數一樣把其它選擇器放在?:host?后面的括號中。
下一個例子再次把宿主元素作為目標，但是只有當它同時帶有?active?CSS 類的時候才會生效。
src/app/hero-details.component.css
:host(.active) {border-width: 3px;
}:host-context
有時候，基于某些來自組件視圖外部的條件應用樣式是很有用的。 例如，在文檔的?<body>?元素上可能有一個用于表示樣式主題 (theme) 的 CSS 類，你應當基于它來決定組件的樣式。
這時可以使用?:host-context()?偽類選擇器。它也以類似?:host()?形式使用。它在當前組件宿主元素的祖先節點中查找 CSS 類， 直到文檔的根節點為止。在與其它選擇器組合使用時，它非常有用。
在下面的例子中，只有當某個祖先元素有 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 規則上就會完全禁止對那條規則的視圖包裝。任何帶有?::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）。 目前，建議先統一使用?::ng-deep，以便兼容將來的工具。
?
?
![[轉載]httpClient.execute拋Connection to refused異常問題](http://pic.xiahunao.cn/[轉載]httpClient.execute拋Connection to refused異常問題)
