调整 mat-side-nav 和 gridster2 的大小问题

Question

当我切换 Side-Nav 时，我等待响应然后调用 gridster.resize():

 sideNavToggle() {
    this.sideNav.toggle().then(() => {
      this.gridster.resize();
    });
  }

这里是完整的stack-blitz example。

确保应用程序 window 足够宽，以便 gridster 显示桌面布局 - 或更好打开new window.

中的应用程序

这是一个例子：
当我启动应用程序时，我的 gridster 项目图块的宽度为 ~223，并且按预期显示。

当我现在切换侧边导航时，gridster 项目被正确调整大小：

itemComponent.width 252

当我再次切换侧边导航以将其打开时，同样的情况发生了：

你知道我错过了什么吗？

注意：在我的实际应用程序中，磁贴包含一个图表组件，该组件将根据其父级 div（在磁贴中）自动调整大小。因此，当调整大小事件发生时，磁贴中的 dom-width/height 是正确的很重要。

备注：

Angular、angular-gridster2 和 angular-material 的最新 8.x 版本也会发生这种情况：stackblitz example

Answer 1

处理这个问题的一个好方法是使用 angular-resize-event 库。
那么我们甚至不需要 gridster itemResizeCallback event

这是更新后的 stackblitz example，它使用 resize-sensor

只需将调整大小指令附加到您的容器（参见文件 tile.component.html）：例如

<p (resized)="onResized($event)">..</p>

并在回调中调整图表大小，canvas，等等（参见文件 tile.component.ts）

onResized(event: ResizedEvent) {
  // resize your chart, canvas
  // maybe use event.newWidth / event.newHeight when required
}

Resizing issue with mat-side-nav and gridster2