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上捕获它

属性更改后，将重新渲染视图后的生命周期挂钩

1 个答案: