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

Posted 2023-02-18

【中文标题】mat-side-nav 和 gridster2 的大小调整问题

【英文标题】：Resizing issue with mat-side-nav and gridster2

【发布时间】：2019-10-22 15:48:33

【问题描述】：

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

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

这是完整的stack-blitz example。

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

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

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

当我使用开发工具时，我可以看到磁贴的新宽度是 252 gridster 调整大小回调的控制台日志也显示宽度为 252 但是

组件中的宽度是错误的

：仍然是223（见磁贴中的文字）：

itemComponent.width 252

当我再次切换侧导航打开它时，同样的情况发生：

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

你知道我错过了什么吗？

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

注意事项：

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

【问题讨论】：

您的问题有助于解决我在调整网格大小方面遇到的问题。非常感谢

【参考方案1】：

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

这是一个更新的stackblitz example，它使用了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
  

【讨论】：

在我的例子中，有一个使用角梁创建的仪表板库。当点击侧中殿按钮时，girdster gird 没有拉伸。我该如何解决？

@ShameeraAnuranga 我不知道 angular-gridster：这个问题是针对 angular-gridster2 - 如果您使用不同的库，您应该提出一个新问题。

不是不同的库。我用 angular-gridster2(8.2.0v) 创建了一个仪表板。有一个 mat-side-nav 。当我单击侧导航按钮时，仪表板网格应该会增大，但这不会发生。你对此有什么想法吗？

那应该和上面的stackblitz例子一样吧？在示例中，当您单击 Toggle sidenav.. 按钮时，它按预期工作。