Angular 4 – Как применить отображаемую высоту div к другому div?

У меня есть два именованных шаблона. Я хочу применить высоту первого ко второму всякий раз, когда изменяется содержимое первого. Я могу получить доступ к ним обоим, используя 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"
);

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


angular elementref
person Nimish David Mathew    schedule 19.03.2018    source источник
comment
Пробовали element.offsetHeight; ?   -  person Sulthan Allaudeen    schedule 19.03.2018
comment
Да. Я могу установить высоту и все. Проблема в том, что я не получаю обновленную высоту после повторного рендеринга div.   -  person Nimish David Mathew    schedule 19.03.2018
comment
@NimishDavidMathew: отметьте $apply . Возможно, вам не хватает цикла дайджеста, и, следовательно, вы не получаете обновленное значение.   -  person Shashank Vivek    schedule 19.03.2018
comment
@ShashankVivek Можете ли вы рассказать, как использовать $apply? Я использую Ангуляр 4.   -  person Nimish David Mathew    schedule 19.03.2018
comment
@NimishDavidMathew: у вас был неправильный тег angularjs. Можете ли вы поделиться своим кодом Angular 4, чтобы мы могли увидеть фактический код. Попробуйте функцию tick() для цикла обнаружения изменений.   -  person Shashank Vivek    schedule 19.03.2018
comment
@ShashankVivek Добавил код в вопрос.   -  person Nimish David Mathew    schedule 19.03.2018

Ответы (1)


arrow_upward
12
arrow_downward

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

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

Renderer – это Renderer2, доступный в @angular/core.

person Nimish David Mathew    schedule 22.03.2018