Есть ли способ избежать использования таймера после установки размера элемента?

Question

Это упрощенный пример того, что я пытаюсь сделать ...

В приведенном ниже фрагменте кода я хочу установить для элемента div новый размер, а затем отобразить размер элемента , Если я не использую таймер, отображается старый размер, а не новый.

Есть ли обещание или обратный вызов, который я могу использовать вместо таймера здесь?

Большое спасибо - Джон

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div 
      style="background-color: bisque; height:250px; width: 350px; position:relative;"> 

      <div 
        #sizeableDiv
        style="background-color:cornflowerblue;" 
        [ngStyle]="{'height':divHeight, 'width':divWidth}">
      </div>

      <div style="position:absolute; left:10px; bottom:10px">
        <button (click)="setDivSizeNoTimer()">Set Size no Timer</button>
        <button (click)="setDivSizeWithTimer()">Get Size with Timer</button>
      </div>

    </div>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  @ViewChild("sizeableDiv", null) sizeableDiv: ElementRef; 

  title = 'angular-dom-promise-q';
  divWidth:string = "100px"; 
  divHeight:string = "100px"; 

  // 
  // we want to set the div size and display the new div size 
  // 

  // this will display incorrect div grid size
  setDivSizeNoTimer() {
    this.divWidth = "200px";
    this.divHeight = "200px"; 
    this.getDivSize();
  }

  // this will display correct div size 
  // is there any way to do this without the timer? 
  setDivSizeWithTimer() {
    this.divWidth = "200px";
    this.divHeight = "200px"; 
    setTimeout(
      () => {
        this.getDivSize()
      }, 1 
    )
  }

  private getDivSize() {
    console.log('Div size: ', this.sizeableDiv.nativeElement.offsetWidth, this.sizeableDiv.nativeElement.offsetHeight);
  }

}

Answer 1

После установки размера элемента вы можете позвонить ChangeDetectorRef.detectChanges, чтобы обновить представление синхронно:

constructor(private changeDetectorRef: ChangeDetectorRef) { }

setDivSizeNoTimer() {
  this.divWidth = "200px";
  this.divHeight = "200px"; 
  this.changeDetectorRef.detectChanges();
  this.getDivSize();
}

См. этот стек для демонстрации.