Angular 4 - 如何将 div 的渲染高度应用到另一个 div?

Angular 4 - How to apply the rendered height of a div to another div?

我有两个命名模板。每当第一个的内容发生变化时,我想将第一个的高度应用于第二个。我可以使用组件内的 ElementRef 访问它们。因此,当我更改绑定到第一个模板的属性时,我使用相应的 ElementRef 获取其高度并将其应用于第二个模板的 ElementRef。

现在的问题是,在属性更改后,我从第一个模板对应的ElementRef 中获取的高度不是更新后的高度。 returns 属性 更改和重新渲染之前 div 的高度。

我希望能够在 div 更新后获得实际渲染高度。我做错了什么?

更新:

代码:

var height = `${this.profile.nativeElement.offsetHeight}px`;
this.renderer.setStyle(this.board.nativeElement, "height", height);
this.renderer.setStyle(
this.board.nativeElement,
"overflow-y",
"scroll"
);

这里的profile是第一个div和对应的ElementRef board 第二个的 ElementRef。 属性 更改后,我调用包含上述代码的函数。那么我得到的高度就是div的旧高度,也就是属性改变重新渲染前的高度

使用@ViewChild:

访问每个div对应的ElementRef
@ViewChild("profile") profile;
@ViewChild("board") board;

实施 AfterViewChecked 并在 ngAfterViewChecked 中执行以下操作:

constructor(private renderer: Renderer2) { 
}

ngAfterViewChecked() {
  if (this.profile && this.board) {
    var height = `${this.profile.nativeElement.offsetHeight}px`;
    this.renderer.setStyle(this.board.nativeElement, "height", height);
  }
}

rendererRenderer2@angular/core[=12= 中可用]