角度 - 樣式不適用於我父母的自定義組件

Question

我不明白爲什麼我的保證金未在此示例中應用。看來海峽足夠向前。

應用程序模板：

<my-component class="my-class">Test</my-component> 
<div>Some Conent</div> 

應用樣式：

.my-class { margin-bottom: 30px; } 
div { background-color: red; } 

組件模板：

<div><ng-content></ng-content></div> 

股利得到紅色的背景，但兩者之間沒有任何餘量;

Plunker：https://plnkr.co/edit/oUczApNhhPrAOKy5Iclp

Answer 1

因爲從角部件選擇器是不是「真實的」 html元素，因此它們沒有默認樣式。因爲瀏覽器不知道如何顯示它們，也不會應用任何會影響組件周圍css佈局的樣式（例如margin或height）。

要解決此問題，您需要將css display屬性與除組件none以外的任何值應用到您的組件。

例如：

.my-class { 
    display: block; 
    margin-bottom: 30px; 
}