1

我有一个使用 Gridster2 从材料侧边栏项导航的网格。侧边栏已打开，但是，每当我切换侧边栏（隐藏它）时，gridster 不会调整项目的大小，直到我强制刷新。有没有办法让它“自动”刷新？

要重现它，只需转到https://tiberiuzuld.github.io/angular-gridster2/并检查元素并删除<mat-nav-list class="mat-nav-list mat-list-base" role="navigation">及其内容。在您更改网格类型之前，它不会全屏显示。

参考：https ://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/api

4

2 回答 2

1

我通过以下两个步骤解决了这个问题：

  1. 步骤 1：通过添加[ngStyle]到<gridster>. 它增加了响应性grid-items：

    <gridster [options]="options" [ngStyle]="{'width': toggled ? '100%' : 'auto'}">
   <gridster-item [item]="item" *ngFor="let item of dashboard">
      <!-- your content here -->
   </gridster-item>
</gridster>

    toggled表示侧边栏是否切换的布尔值在哪里。初始值为false。

  2. 第2步：为了强制项目内容（在我的例子中是图表）在网格项目中变得响应，我使用了下面的代码：

    itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
    window.dispatchEvent(new Event('resize'));  // to reisize respective charts 
})

    itemInitCallback提供的内置gridEvent回调方法在哪里angular-gridster2

于 2020-02-19T09:46:32.030 回答
1

网格将仅在窗口调整大小时自动调整大小。在触发 resize 事件之前，无法跟踪容器大小的变化。

您需要在需要的地方触发调整大小事件。

this.options.api.resize()

请参考api 文档。

于 2019-10-21T09:29:23.460 回答