Angular - 未从父级应用于我的自定义组件的样式

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>

div获得红色背景，但两者之间没有差距;

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

Answer 1

因为角度分量选择器不是真实的＆＃34; html元素，因此它们没有默认样式。因此，浏览器不知道如何显示它们，并且不应用任何对组件周围的css布局产生影响的样式（例如margin或height）。

要解决此问题，您需要将除display之外的任何值的css none属性应用于您的组件。

例如：

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