在 Angular 中观看模板参考值的成本是多少

Question

Currently using Angular 8, ended up with a code like this.

<div [style.height.px]="dynamicHeightComponent.offsetHeight">
</div>
<div #dynamicHeightComponent>
...
</div>

Is this a hit to performance, if it is, how can we get a better implementation.

Answer 1

Reading a value from template reference sometimes can be a performance problem, the property offsetHeight definitely will affect the performance. Because when trying to read the value offsetHeight browser will forcefully reflow the layout.

So it depends on which property you are reading. check this list https://gist.github.com/paulirish/5d52fb081b3570c81e3a