如何獲得全球選擇內部仿真視圖封裝（CSS/Angular2）

Question

我有這裏面家庭成分：

<alert type="info">Hello from ng2-bootstrap</alert> 

裏面我home.style.scss，我有這樣的：

:host .alert { 
    background-color: green; 
} 

應該將背景顏色更改爲綠色，但不是。

上面的CSS代碼會產生這種風格：

[_nghost-wjn-3] .alert[_ngcontent-wjn-3] { 
    background-color: green; 
} 

和最終的HTML看起來像這樣：

<home _nghost-wjn-3=""> 
    <div _ngcontent-wjn-3="" class="card-container"> 
    <alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info"> 
     <div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info"> 
     Hello from ng2-bootstrap Sat Sep 17 2016 
     </div> 
    </alert> 
    </div> 
</home> 

我不知道問題是什麼在這裏，但我認爲，選擇器是錯誤的。我想最後的選擇是：

[_nghost-wjn-3] .alert 

代替：

[_nghost-wjn-3] .alert[_ngcontent-wjn-3] 

或者換句話說，爲什麼會出現在<div class="alert">...</div>沒有_ngcontent-WJN-3的屬性？

也許我做錯了所有的事情。我試圖實現的是定製自定義組件（上面代碼中的<home>）內的ng2-bootrap庫（https://github.com/valor-software/ng2-bootstrap）提供的各個引導組件（上述代碼中的<alert>）的CSS。

我在home組件中使用默認視圖封裝（模擬）。

我該怎麼做？

Answer 1

我想出了自己。這就是我一直在尋找：

:host /deep/ .alert { 
    background-color: green; 
} 

上面的代碼將產生如下：

[_nghost-wjn-3] .alert { 
    background-color: green; 
} 

這樣我可以修改默認樣式的引導類的（.alert，在這種情況下）在我的組件<home>裏面。

來源：https://angular.io/docs/ts/latest/guide/component-styles.html

Answer 2

您需要：

[_nghost-wjn-3] alert[_ngcontent-wjn-3]

相反的：

[_nghost-wjn-3] .alert[_ngcontent-wjn-3]

如果你去看看你的結構，警示標籤有ngcontent...屬性，不他DIV小孩警戒類。