Angular 在flex-layout 中如何让一个元素的高度响应另一个元素的变化而变化

1. • 问题

比如说现在在一个flex-layout 中

<div class="flex-layout">
    <div class="element-1"></div>
    <div class="element-2"></div>
</div>

.flex-layout {
    display: flex;
    flex-wrap: wrap;
}

这时如何让element-1 的高度(或宽度)随element-2变化而变化呢？

2. • 方法

可以使用模板变量，在页面模板html中可以通过模板变量来获取这个element的纯高度或者纯宽度

如下：

<div class="flex-layout">
    <div class="element-1" [style.height.px]="#element2.offsetHeight"></div>
    <div #element2 class="element-2"></div>
</div>