Question

当我检查我的组件元素时，有时它的width和height为0，即使我在里面检查，组件包含的元素也有一定的宽度和高度。这导致我无法设置主机元素的样式，因为即使我通过声明width将height和:host { // styles }设置为主机元素，它也不起作用。所以我最后在组件元素周围添加了一个额外的div包装，以提供一些width和height，我觉得它很冗长。这是自然而然的事吗？或者我错过了什么？

Answer 1

通过在浏览器中检查呈现的Angular组件，我可以看到，默认情况下host元素具有属性display: inline。正如一些问题（1，2）中所提到的，内联元素的大小无法使用CSS样式进行更改。

为了使宽度和高度样式属性有效，您应该将主机元素的display属性设置为block或inline-block：

display: block;
display: inline-block;

您可以在this stackblitz中看到一个示例，其中使用了以下语法：

@Component({
  selector: 'user-form',
  host: {
    "[style.display]": "'inline-block'",
    "[style.width.px]": "300",
    "[style.height.px]": "200",
    "[style.background-color]": "'orange'"
  },

角度组件主机元素的宽度和高度为0

1 个答案: