问题样式：Angular 2 中的主机答案

【问题标题】：Issues Styling :host in Angular 2问题样式：Angular 2 中的主机
【发布时间】：2016-10-09 12:09:11
【问题描述】：

[编辑以更好地描述问题]

我在 Angular 2 中将各种样式应用于 :host 时遇到了困难。下面的简单 plunker 演示了这个问题。起初我认为某些样式（例如边距/填充）没有得到应用，但似乎问题在于宿主元素的行为不像普通元素。请注意，我添加了边框和填充。边框看起来很奇怪，并且填充根本不会移动元素内的内容（尽管它似乎确实会影响边框的外观。这是我正在应用的样式：

:host {padding:10px; border:1px solid red;}

呈现的代码如下所示：

<sample-component _nghost-cxm-2="">
  <div _ngcontent-cxm-2="">
    <h3 _ngcontent-cxm-2="">Sample Component</h3>
  </div>
</sample-component>

我可以在开发工具中看到样式被应用到 <sample-component> 元素，但这是页面呈现的样子：

我希望边框将内容包裹在组件内，但它的行为很奇怪。这是一个示例 plunker：https://plnkr.co/edit/k7LJcmVlhJINmakBJAau?p=preview

我错过了什么？

【问题讨论】：

它按预期工作。我不觉得有什么问题。 plnkr.co/edit/Fs2Igm0N2eMTE1dyMsdF?p=preview更改值（px），它会做出相应的反应。
奇怪的是，即使您的 plnkr 对我也不起作用。你使用的是什么浏览器？我试过 Firefox 49.0.1 和 chrome 53.0.2785.143。将 100px 更改为任何其他值不会改变任何内容。
我想你正在寻找margin property。填充在 chrome（最新版本）中工作正常。尝试添加 border:1px solid 然后更改填充值，您会看到相应的行为。

标签： angular styling

【解决方案1】：

我刚刚意识到问题所在。主机元素设置为display:inline。将元素更改为 display:block 可以解决问题。不知道我以前是怎么错过的。

【讨论】：

我知道规则说不要做 +1 cmets，但他们什么也没说 +5 :heart:

【解决方案2】：

我已经向您展示了您的 plunker 正在工作。除此之外，您可以使用host 元属性将样式应用于宿主元素，如下所示，

https://plnkr.co/edit/7JquAioc6lUx9bUrPCiZ?p=preview

@Component({
  selector: 'sample-component',
  template: `
    <div>
      <h3>Sample Component</h3>
    </div>
  `,
  host:{
        'style': 'color:red;padding:50px',
       }
})
export class SampleComponent {}

修改后更新：

我可能不会给你一个确切的答案，但是在 DOM 中创建的<sample-component> element/tag 存在一些问题。也许我理解你想要达到的目标。我有一个解决方法。

看这里 - https://plnkr.co/edit/yLLsZABJWCrvE0CWHgFy?p=preview

【讨论】：