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

Question

当我切换侧导航时，我等待响应，然后调用gridster.resize()：

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

这是一个完整的堆栈闪电战示例。

确保应用程序窗口足够宽，以便 gridster 显示桌面布局- 或更好地在新窗口中打开应用程序。

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

当我现在切换 side-nav时，gridster 项目的大小已正确调整：

• 当我使用开发工具时，我可以看到瓷砖的新宽度是 252
• gridster 调整大小回调的控制台日志也显示宽度为 252
• 但是组件中的宽度是错误的：它仍然是 223（参见图块中的文本）：

itemComponent.width 252

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

• 瓷砖正确回到 223
• 但磁贴中的文字仍显示 252 的宽度
• 似乎我的瓷砖的宽度总是落后

你知道我错过了什么吗？

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

笔记：

• 这也发生在 Angular、angular-gridster2 和 angular-material 的最新 8.x 版本中：stackblitz 示例

Answer 1

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

这是一个更新的stackblitz 示例，它使用了 resize-sensor

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

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

并在回调中调整图表、画布等的大小（参见文件tile.component.ts）

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