角度分量主机元素的宽度和高度为0-Java 学习之路

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

1 回答

7
通过检查浏览器中呈现的Angular组件，我可以看到，默认情况下host元素具有属性 display: inline . 正如在几个问题（1，2）中提到的，内联元素的大小不能用CSS样式更改 .

为了使width和height样式属性有效，您应该将host元素的 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'"
  },
```
回复于 2024-04-29T13:13:24+08:00

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

1 回答

相关问题