Angular组件宿主元素宽高均为0

Question

当我检查我的组件元素时，有时它的 width 和 height 为 0，即使我检查内部时，组件包含的元素具有特定的宽度和高度。这导致我无法设置宿主元素的样式，因为即使我通过声明 :host {//styles } 将 width 和 height 设置为宿主元素 它不起作用。所以我最终添加了一个额外的 div 包裹组件元素，以提供一些 width 和 height 我觉得它很冗长。这是自然的事情吗？还是我遗漏了什么？

Answer 1

通过检查浏览器中呈现的 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;
}