角度分量主机元素的宽度和高度为0

Question

当我检查我的组件元素时,有时它width和height0都是0,即使我在里面检查,组件包含的元素也有一定的宽度和高度.这使我不能够因为即使当我设置样式host元素width,并height通过声明向主机元素:host { // styles }这是行不通的.所以,我最终增加一个额外的div组件元件的周围包裹给一些width和height我详细找到它.这是自然而然的事吗？或者我错过了什么？

Answer 1

通过检查浏览器中呈现的Angular组件,我可以看到display: inline,默认情况下host元素具有该属性.作为几个问题(提及的1,2),内联元素的大小不能与CSS样式改变.

为了使width和height样式属性有效,您应该将displayhost元素的属性设置为block或inline-block:

display: block;
display: inline-block;

您可以在此stackblitz中看到一个示例,其中使用以下语法:

:host {
    display: inline-block;
    width: 300px;
    height: 200px;
    background-color: orange;
}