typescript - 在页面之间切换时，resizeObserver 没有被激活

Question

我的问题是我使用 resizeObserver 来检测表何时更改其大小并执行函数，它在重新加载页面时可以正常工作，但是如果您更改页面并返回上一个页面，resizeObserver 会停止工作打字稿代码

ngOnInit() {
let elem = document.getElementById('table')
let resizeObserver = new ResizeObserver(() => {
  console.log('table size changed')
});
resizeObserver.observe(elem);}

HTML 元素

    <ngx-datatable
      id="table">
      ... 
    </ngxdatatable>

Answer 1

我认为ngOnInit不会再次调用，而不是通过 id 引用元素，您可以在模板中使用 resize 事件。

在您的模板中：

<ngx-datatable waResizeBox="content-box" (waResizeObserver)="onResize($event)">
  <!-- ... -->
</ngx-datatable>

因为您正在调用 onResize，所以您不需要将任何逻辑放在ngOnInit：

export class AppComponent  {
  width: number = 0;
  height: number = 0;
  domRectReadOnly: DOMRectReadOnly | undefined;

  onResize(entry: ResizeObserverEntry[]) {
    this.width = entry[0].contentRect.width
    this.height = entry[0].contentRect.height;
    this.domRectReadOnly = entry[0].contentRect;

    console.log('Table size changed !!!')
    console.log('WIDTH: '+ this.width +', HEIGHTH: ' + this.height)
  }
}

这是Stackblitz上的一个示例。

有关如何使用 ResizeObserver 的信息，您可以查看此GitHub 页面。