如何将边距或 css 类应用于 Angular 2 组件？答案

【问题标题】：How to apply margins or css classes to Angular 2 component?如何将边距或 css 类应用于 Angular 2 组件？
【发布时间】：2017-11-21 11:56:12
【问题描述】：

假设我有一个想要应用一些边距的组件，最好是通过 Bootstrap 辅助类，例如mt-3 应用上边距。当我像这样在组件上指定它们时：

<my-custom-input 
   required 
   class="mt-3" 
   name="usr" 
   label="User" 
   placeholder="Please enter username" 
   [(ngModel)]="username">
</my-custom-input>

class="mt-3" 什么都不做！也无法通过 Chrome 开发工具手动设置边距...我猜是因为 my-custom-input 不是预定义的 HTML 元素（如 div），它不能定义边距？

在任何应用程序中，这似乎都是微不足道的事情，但我很惊讶我至今无法找到答案。我们如何重新定位这样的组件？至少，在父级（而不是在组件模板内）指定边距似乎很重要？..

【问题讨论】：

您的 my-custom-input 对课程有什么作用？ my-custom-input 里面还有更多的 HTML 元素吗？
@EyalCohen 是的，my-custom-input 确实有一个 div 和该 div 内的更多嵌套内容。

标签： css angular

【解决方案1】：

在你的 CSS 中给它一个display: block;

【讨论】：

看来我们需要将display 属性设置为宿主元素。看起来也像 display: flex 作品。如果有人可以解释为什么需要这样做，那将很有用
这个答案应该有更多的选票。我花了好几天才找到解决办法。