html - 如何以 Angular 动态设置 sibling 的最大宽度

Question

是否可以将 div 的最大宽度设置为与其同级宽度相同的值(在 angular6 中)？

换句话说，我是否可以将“child_two”的最大宽度设置为与“child_one”的宽度相同的值，并且在渲染时我只知道“child_one”的宽度？

`<div class="parent-div">
   <div id="child_one" class="child-div"> </div>
   <div id="child_two" class="child-div"> </div>
 </div>`

Answer 1

您可以将 child_two 的 max-width 样式属性绑定(bind)到 child_one 的 offsetWidth，使用模板引用变量 child1 的帮助:

<div class="parent-div">
  <div id="child_one" class="child-div" #child1 > </div>
  <div id="child_two" class="child-div" [style.max-width.px]="child1.offsetWidth"> </div>
</div>

参见 this stackblitz用于演示。