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;
}