问题样式 :host in Angular 2

Question

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

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

: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

我已经向您展示了您的 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

Answer 2

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

问题样式 :host in Angular 2

Issues Styling :host in Angular 2

styling

angular