Angular 组件宿主元素的宽度和高度为 0

Posted 2023-03-06

【中文标题】Angular 组件宿主元素的宽度和高度为 0

【英文标题】：Angular component host element width and height are 0

【发布时间】：2018-08-03 01:28:13

【问题描述】：

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

【参考方案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;

【讨论】：

有什么理由让 :host 显示应该是内联的？改成block会不会有什么不良影响？

@QianChen - 主机元素默认为inline，但可以更改。我知道的唯一副作用是布局，这就是我们想要的。您也可以选择inline-block，以保留将组件插入一行的功能。

我应该将它添加到每个组件中吗？我可以将它添加到某个地方以在全球范围内应用它吗