角度 - 样式不适用于我父母的自定义组件

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