#angular #angular-material
#угловой #угловой-материал
Вопрос:
Как можно правильно измерить ширину содержимого sidenav после изменения ширины sidenav.
Смотрите stackblitz здесь: https://stackblitz.com/edit/sidenav-collapse?file=src/app/sidenav-autosize-example.html
Шаги для воспроизведения:
- Нажмите кнопку «Переключить размер содержимого sidenav» -> изменение ширины содержимого sidenav
- Вычисленный размер в оранжевом поле неверен
Sidenav использует автоматическое изменение размера. Смотрите больше здесь, в Sidenav API: https://material.angular.io/components/sidenav/api
Я отключил анимацию, добавив NoopAnimationsModule . При включенной анимации становится хуже. Тогда вычисление также неверно при нажатии «Переключить sidenav» в примере.
Вот еще один пример, который имитирует sidenav, но без материала sidenav: https://stackblitz.com/edit/angular-simulate-sidenav?file=src/app/app.component.ts
Это работает, как и ожидалось. Вот почему я думаю, что в Material Sidenav есть что-то особенное. Только что?
Комментарии:
1. У меня нет ответа для вас, но я заметил, что если я добавлю 100 мс к тайм-ауту, отобразятся правильные значения. stackblitz.com/edit /…
2. Вы правы, это похоже на проблему времени. К сожалению, ждать нельзя. Кроме того, продолжительность необходимой задержки, по-видимому, также зависит от процессора: (
3. Мне кажется, что задержка происходит отсюда: github.com/angular/components/blob/master/src/material/sidenav /… _doCheckSubject генерируется, когда выполняется changeDetection и когда значение AutoSize равно true (см. Здесь: github.com/angular/components/blob/master/src/material/sidenav /… )