Question

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

现在，问题是，在属性更改后，我从ElementRef获得的与第一个模板对应的高度不是更新的高度。它在属性更改和重新呈现之前返回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"
);

此处 个人资料 是与第一个div对应的ElementRef，第二个是 board 的ElementRef。属性更改后，我调用包含上述代码的函数。然后我得到的高度是div的旧高度，即在属性更改和重新渲染之前。

Answer 1

使用@ViewChild访问每个div对应的ElementRef：

@ViewChild("profile") profile;
@ViewChild("board") board;

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

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

@ angular / core

中提供了 渲染器 Renderer2

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

1 个答案: