Question

   @Component({
    selector: 'sc',
    templateUrl: '<div>
<form id="frmId" #cntfrm [formGroup]="scForm">

</form>
<div id="boxId" [style.height.px]= "cntfrm.clientHeight">
</div>
</div>
',
    directives: [REACTIVE_FORM_DIRECTIVES]
})
export class SCComponent implements OnInit, AfterViewInit {
.......
}

初始化sc组件时，我需要设置窗体的高度，该高度可能与div高度不同。我尝试了上面cntfrm引用变量高度到div高度的方法，但它被忽略了。但我可以在UI上使用插值显示{{cntfrm.clientHeight}}的值。

Answer 1

只是一个想法，也许你可以尝试这样的事情：

ngOnInit() {
    this.height = document.getElementById('frmId').clientHeight;
}

修改

创建了一个plunker：https://plnkr.co/edit/y6ZG7uI5fLhAzqiY8s2t

Answer 2

ngAfterViewChecked(){

    setTimeout(()=>{ this.height = this.el.getElementsByClassName("form")[0].clientHeight;}, 0); 
 }

https://plnkr.co/edit/VdRKuQwDyzFX9VMZSK1J

实际问题是我的表格是使用ngif绑定的模板。因此，表格不会渲染，直到ngAfterView。如果我在ngOnInit中指定表单高度，我会得到未定义的错误。如果我在ngAfterView中正常分配它，我会得到角度单向错误，因为在编写视图后状态会发生变化。所以，我已经使用setinterval在下一个周期中完成了它。其他选项是启用生产模式。我猜在该模式下，角度变化检测为每个事件循环解析两次。

angular2动态高度为children元素

2 个答案:

修改