Изменение размера с mat-side-nav и gridster2

Question

Когда я переключаю Side-Nav, я жду ответа и затем вызываю gridster.resize():

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

Вот полный пример блиц-стека.

Убедитесь, что окно приложения достаточно широкое, чтобы гридстер отображал макет рабочего стола - или лучше Откройте приложение в новом окне.

Вот один пример:
Когда я запускаю приложение, ширина моего элемента гридстера составляет ~ 223, и он отображается, как и ожидалось.

Когда я теперь переключаю боковую навигацию, размер элемента гридстера корректно изменяется:

• когда я использую инструменты разработки, я вижу, что новая ширина плитки равна 252
• также журнал консоли обратного вызова изменения размера гридстера показывает, что ширина 252
• Но ширина в компоненте неверна: она все равно 223 (см. Текст на плитке):

itemComponent.width 252

Когда я снова переключаю боковую навигацию, чтобы открыть ее, происходит то же самое:

• плитка вернулась к 223
• но текст в плитке по-прежнему показывает ширину 252
• кажется, что ширина моей плитки всегда отстает

Ты хоть представляешь, чего мне не хватает?

Кстати, в моем реальном приложении плитка содержит компонент диаграммы, размер которого будет автоматически изменяться в зависимости от родительского элемента div (который находится в плитке). Поэтому важно, чтобы dom-width/height в плитке были правильными, когда произошло событие изменения размера.

Примечания:

• это также происходит с последним выпуском 8.x agnular, angular-gridster2 и angular-material: пример stackblitz

Answer 1

Хороший способ справиться с этим - использовать библиотеку https://github.com/vdolek/angular-resize-event.
Тогда нам даже не нужно событие gridster itemResizeCallback

Просто прикрепите директиву изменения размера к вашему контейнеру: например,

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

и в обратном вызове измените размер диаграммы, холста и т. д.

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

Вот обновленный пример stackblitz, который использует resize-sensor