当我检查我的组件元素时,有时它的 width
和 height
为 0,即使我检查内部时,组件包含的元素具有特定的宽度和高度。这导致我无法设置宿主元素的样式,因为即使我通过声明 :host {//styles } 将
它不起作用。所以我最终添加了一个额外的 width
和 height
设置为宿主元素div
包裹组件元素,以提供一些 width
和 height
我觉得它很冗长。这是自然的事情吗?还是我遗漏了什么?
最佳答案
通过检查浏览器中呈现的 Angular 组件,我可以看到宿主元素默认具有属性 display: inline
。正如在几个问题(1,2)中提到的,内联元素的大小不能用 CSS 样式改变。
为了使宽高样式属性生效,应该将宿主元素的display
属性设置为block
或inline-block
:
display: block;
display: inline-block;
您可以在 this stackblitz 中查看示例,其中使用了以下 CSS:
:host {
display: inline-block;
width: 300px;
height: 200px;
background-color: orange;
}
关于Angular组件宿主元素宽高均为0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48940252/