Хук жизненного цикла после просмотра перерисовывается при изменении свойства

Question

У меня есть компонент (пузырь выноски), который должен рассчитать свою позицию на основе его собственного размера элемента. По умолчанию он скрыт, поэтому элемент не имеет размера.

Когда я изменяю скрытую привязку на false, где мне перехватить событие, где я могу измерить размер нативного элемента после его рендеринга?

@Component({
  selector: 'app-callout',
  template: `<div #content class="callout-content">
    <div class="callout-header">
      <div class="title">{{title}}</div>
    </div>
    <div style="height: 100%; flex:1">
      <ng-content></ng-content>
    </div>
  </div>`
})
export class CalloutComponent {
  @HostBinding('hidden')
  @Input()
  isHidden:boolean = false;
  @ViewChild('content') content: ElementRef<HTMLDivElement>

  ngAfterViewChecked(){
    //called after isHidden is changed, but
    //NOT OK: content.nativeElement.offsetWidth == 0;

    setTimeout(() => {
      // OK: content.nativeElement.offsetWidth == 100;
      // but I would like to get rid of this timer workaround

    }, 100);
  }

  show(){
    this.isHidden = false;
  }
}

Answer 1

Вы должны быть в состоянии поймать его на ngOnChanges