在Angular组件之间切换时offsetWidth错误

Question

要将画布调整为当前元素大小，请使用以下HTML：

<div #canvasContainer class="canvas-container">
<canvas id="canvas"></canvas>
</div>

这使得可以使用offsetWidth和offsetHeight查询canvasContainer的大小，然后设置canvas元素的大小。为此，我使用Fabric library和命令，其中canvas是fabric.Canvas对象，而this是Angular组件。

ngAfterViewInit() {
  // Sets the canvas dimensions during the initial render
  console.log(this.canvasContainer.nativeElement);
  this.canvas.setDimensions({
    width: this.canvasContainer.nativeElement.clientWidth,
    height: this.canvasContainer.nativeElement.clientHeight
  });
}

问题在于，在组件之间进行切换时，canvasContainer的offsetWidth小于实际宽度。我认为这是滚动条的宽度，因为画布宽度和div容器宽度之间的差异介于Chrome的15px和Firefox的12px之间。

使用window：resize回调调整窗口大小时，即使在组件切换期间，offsetWidth以及检查nativeElement的控制台日志时都是正确的。

解决此问题的最佳方法是什么？

该组件的源代码可以在Github上找到。