角度：如何更改子元素的高度

Question

目前我的布局是这样

[String]

父组件的高度固定（1000px） 子级1具有2种状态：展开（200像素）和折叠（10像素） 我想使用这些信息来相应地计算和更新child2的高度

我不想将child2的高度设置为auto（我需要一个特定的值，因为这是将其传递到另一个库（虚拟滚动条）的要求）

我该如何实现？

我尝试使用ViewChild + ElementRef从父组件获取子组件的高度，但是当我尝试更新子组件的高度时，似乎会导致ExpressionChangedAfterItHasBeenCheckedError

子组件应该将其当前高度输出给父组件，还是父组件应从其子组件读取它的高度？

Answer 1

您可以简单地使用flex-box来代替辛苦的操作，它会为您完成所有计算。

例如

.parent {
   display:Flex;
   flex-direction:column;
   flex-wrap:wrap;
   height: 1000px;
}

.child1 {
/*  expanded */
  flex: 0 0 20%;
}

.collapsed {
  flex: 0 0 2%;
}

.child2 {
  flex: 1;
}

您可以在ngclass的帮助下动态应用折叠的分类，希望对您有所帮助。

如果您想了解有关Flexbox的更多信息，请在https://flexboxfroggy.com/玩这些免费游戏，希望对您有所帮助。

Answer 2

是的，您是对的。您需要Output从子级到父级的值，并将其传播到所需的组件并进行计算。 这是an example。 如果要将此高度更改传递给Components而不是子级，则建议您使用SharedService订阅并更改值。不管是不是兄弟姐妹，通过这种方式，您可以在多个组件之间共享数据。

如果您只想更新高度，则使用Flexbox或Grids是更好的选择。