调整垫侧导航和gridster2的大小

Question

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

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

这里是完整的stack-blitz example。

请确保使应用程序窗口足够宽，以使gridster显示桌面布局 -或更好的方法是在new window中打开应用程序。

>

这里是一个例子：
启动应用程序时，栅格项目图块的宽度为〜223，并按预期显示。

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

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

itemComponent.width 252

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

• 磁贴正确回到223
• 但图块中的文本仍显示252的宽度
• 看来我瓷砖的宽度总是滞后了

你知道我在想什么吗？

顺便说一句：在我的实际应用程序中，图块包含一个图表组件，该组件将基于其父div（在图块中）自动调整大小。因此，重要的是，在发生调整大小事件时，图块中的dom-width / height必须正确。

注意：

• 最新的8.x版本的agnular，angular-gridster2和angular-material也是如此：stackblitz example

Answer 1

处理此问题的好方法是使用angular-resize-event库。
然后，我们甚至不需要栅格器itemResizeCallback event

只需将resize指令附加到您的容器即可：例如

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

，然后在回调中调整图表，画布等的大小。

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

这是一个更新的stackblitz example，使用了调整大小传感器