基于可用空间的元素的 Angular 2+ : Dynamically set CSS width,

Question

我考虑如何有效地设置 Angular 2+ 元素的宽度。我想首先检查父元素中的可用空间，然后适当设置子元素的宽度以同等地适应其父元素中的可用空间。

1. 如何监听父元素的宽度变化事件？
2. 如何检查这个宽度？
3. 然后我可以计算元素宽度以满足组件用户的要求
4. 然后将元素的宽度更改为计算值。

我尝试使用 CSS3 和媒体查询，但它使我的组件与某些大小调整前提条件紧密耦合，并使我的 Angular 组件不通用。

Answer 1

您可以在子元素上使用ngStyle。 documentation的示例:

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

您将负责从父组件中检索/计算最新的 widthExp 变量。