Изменение размера с mat-side-nav и gridster2 - PullRequest
Новая
       45

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

0 голосов
/ 07 июня 2019

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

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

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

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

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

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

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

enter image description here

itemComponent.width 252

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

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

enter image description here

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

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

Примечания:

1 Ответ

0 голосов
/ 13 июня 2019

Хороший способ справиться с этим - использовать библиотеку 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пример , использующий датчик изменения размера

...