角组件主体元素的宽度和高度均为0 [英] Angular component host element width and height are 0

问题描述

当我检查组件元素时，即使我在内部检查，有时它的width和height也为0，该组件包括的元素具有一定的宽度和高度.这导致我无法设置宿主元素的样式，因为即使我通过声明:host { // styles }将width和height设置为宿主元素也无效.因此，我最终在组件元素周围添加了一个额外的div换行，以给出一些width和height，我觉得它们很冗长.这是自然的事吗?还是我错过了什么?

When I inspect my component element, sometimes its width and height are 0 even though if I inspect inside, the elements the component include have a certain width and height. This leads me not to able to style the host element because even when I set width and height to the host element by declaring :host { // styles } it doesn't work. So I ended up adding an extra div wrapping around the component element to give some width and height which I find it verbose. Is it a natural thing? Or am I missing something?

推荐答案

根据我在浏览器中检查渲染的Angular组件所看到的内容，默认情况下host元素具有属性display: inline.如一些问题( 1 ，

From what I can see by inspecting a rendered Angular component in the browser, the host element has the attribute display: inline by default. As mentioned in a few questions (1, 2), the size of inline elements cannot be changed with CSS styles.

为使width和height样式属性生效，应将宿主元素的display属性设置为block或inline-block:

In order for the width and height style attributes to be effective, you should set the display attribute of the host element to block or inline-block:

display: block;
display: inline-block;

您可以在 此stackblitz ，其中使用以下CSS:

You can see an example in this stackblitz, where the following CSS is used:

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

这篇关于角组件主体元素的宽度和高度均为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！