问题样式：Angular 2中的主持人

Question

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

我很难将各种风格应用于：Angular 2中的主机。下面简单的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

我错过了什么？

Answer 1

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

Answer 2

我已经告诉你，你的掠夺者正在工作。除此之外，您可以使用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>元素/标签存在一些问题。也许我理解你想要实现的目标。我有同样的解决方法。

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