Угловой 4 - Как применить визуализированную высоту div к другому div?

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"
);

Здесь профиль - это ElementRef, соответствующий первому div, и доска ElementRef второго. После изменения свойства я вызываю функцию, содержащую приведенный выше код. Тогда высота, которую я получаю, - это старая высота div, то есть до изменения свойства и повторного рендеринга.

Answer 1

Получите доступ к ElementRef, соответствующему каждому div, используя @ViewChild:

@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);
  }
}

рендер это Renderer2, доступный в @angular/core