Используя угловой 6 и угловой материал 6, я сгенерировал адаптивную навигацию, используя cli:
$ ng generate @angular/material:materialNav --name shared/navigation
Он сгенерировал компонент с помощью панели инструментов и sidenav внутри app / shared / navigation.
Затем я удалил <router-outlet></router-outlet> из app.component.html и поместил тег <navigation></navigation> на его место.
Затем я поместил router-outlet и app-footer в компонент навигации внутри mat-sidenav-content, после mat-toolbar.
Мне не нравится, где размещаются розетка и нижний колонтитул маршрутизатора, а также мне не нравится, как боковая панель перемещает весь контент, панель инструментов и нижний колонтитул. И мне не нравится это на рабочем столе, когда отображается боковая панель, панель инструментов короче, и если на панели инструментов есть центр логотипа, он больше не центрируется.
Ну, кроме тех вещей, которые мне не нравятся, вроде бы все работает нормально, пока я не проверил отзывчивость с сафари . Если я нахожусь на рабочем столе и перехожу на мобильный, то кнопка меню для отображения боковой панели не отображается. И если я перезагрузить страницу с мобильным размером, то появляется кнопка меню. Однако, если я затем изменю его размер на рабочий стол, кнопка меню sidenav все еще там и не исчезает. В chrome это работает нормально, но не в Safari.
Я обновил angular-cli до 7.0.6, angular до 7.0.4 и материал angular до 7.0.4, но все еще имею ту же проблему с сафари, но только с сафари.
Редактировать: Я обновил angular-cli и angular снова до последних версий. Я удалил компонент навигации и сгенерировал снова, как описано выше. Тем не менее проблема с сафари.
Редактировать 2: Эту проблему легко воспроизвести. Вам нужно только:
$ ng new myproject
$ ng generate @angular/material:materialNav --name navigation
// remove <router-outlet></router-outlet> and add <navigation></navigation> to the app.component.html
$ ng serve
и протестируйте его в Safari (он работает как положено в Chrome и Firefox).