Проблема изменения размера с помощью mat-side-nav и gridster2

Когда я переключаю боковую навигацию, я жду ответа и затем вызываю 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 Angular, angular-gridster2 и angular-material: пример stackblitz

angular-material mat-sidenav angular-gridster2
person TmTron    schedule 07.06.2019    source источник
comment
Ваш вопрос очень помогает решить мою проблему с изменением размера сетки. большое спасибо   -  person Shameera Anuranga    schedule 13.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Хороший способ справиться с этим - использовать библиотеку angular-resize-event. < br> Тогда нам даже не нужно событие itemResizeCallback в сетке.

Вот обновленный пример stackblitz, в котором используется датчик изменения размера

Просто прикрепите директиву изменения размера к вашему контейнеру (см. Файл 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
  }
person TmTron    schedule 13.06.2019
comment
в моем случае есть библиотека dahboard, созданная с использованием angular girdster. при нажатии кнопки бокового нефа пояс не растягивается. как мне решить это? - person Shameera Anuranga; 13.12.2019
comment
@ShameeraAnuranga Я не знаю angular-gridster: этот вопрос для angular-gridster2 - если вы используете другую библиотеку, вам следует задать новый вопрос. - person TmTron; 13.12.2019
comment
не другая библиотека. Я создал дашборд с anglar-gridster2 (8.2.0v). Есть коврик-бортик-навигатор. когда я нажал на боковую навигационную кнопку, сетка панели управления должна увеличиться, но этого не произошло. ты хоть представляешь об этом? - person Shameera Anuranga; 13.12.2019
comment
Тогда он должен быть таким же, как в примере с stackblitz выше, верно? В этом примере он работает должным образом, когда вы нажимаете кнопку Toggle sidenav... - person TmTron; 13.12.2019