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

Question

我不明白为什么在这个例子中没有应用我的 margin 。看起来够窄了。

应用模板:

<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获得红色背景，但两者之间没有边距；

普朗克: https://plnkr.co/edit/oUczApNhhPrAOKy5Iclp

Answer 1

因为来自 angular 的组件选择器不是“真正的”html 元素，因此它们没有默认样式。因此，浏览器不知道如何显示它们，并且不会应用任何影响组件周围 css 布局的样式(例如 margin 或 height )。

要解决此问题，您需要应用 css display具有除 none 以外的任何值的属性到您的组件。

例如:

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