角度组件宿主元素宽度和高度均为 0

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

通过检查浏览器中渲染的 Angular 组件，我可以看到，主机元素具有以下属性display: inline默认情况下。正如几个问题中提到的（1 https://stackoverflow.com/q/1423294/1009922, 2 https://stackoverflow.com/q/2491068/1009922)，内联元素的大小不能通过 CSS 样式更改。

为了使宽度和高度样式属性有效，您应该设置display宿主元素的属性为block or inline-block:

display: block;
display: inline-block;

你可以看到一个例子这次堆栈闪电战 https://stackblitz.com/edit/template-driven-form-2-wz3p1j，其中使用以下 CSS：

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