问题样式：Angular 2中的主机

发布时间：2020-12-17 17:04:45 所属栏目：安全来源：网络整理

导读：[编辑以更好地描述问题] 我在将各种样式应用于：Angular 2中的主机时遇到了困难.下面简单的plunker演示了这个问题.起初我认为某些样式(如margin / padding)没有得到应用,但似乎问题是host元素的行为不像普通元素.请注意,我添加了边框和填充.边框看起来很奇怪

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

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

: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>元素,但这是页面呈现的样子：

Weird border behavior

我希望边框将内容包装在组件内部,但它表现得很奇怪.这是一个样本plunker：https://plnkr.co/edit/k7LJcmVlhJINmakBJAau?p=preview

我错过了什么？

解决方法

我刚刚意识到问题所在.主机元素设置为显示：内联.更改要显示的元素：阻止修复问题.我不确定我之前是怎么想的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!