Angular 7 - Как работать с двумя разными навигационными панелями в зависимости от размера окна?

Question

Мой вопрос довольно прост, я думаю,

Я в начале проекта, и я только что закончил Sidenav (расположен слева от экрана), который я фактически использую в качестве компонента. Я хочу использовать «нормальную» верхнюю панель навигации, когда окно меньше, но я не знаю, как на самом деле это реализовать. Нужен ли другой компонент для верхней панели навигации? Если так, как я могу переключаться между этими 2 в зависимости от размера окна?

Кстати, я использую Materialise CSS ...

Answer 1

У меня была похожая проблема. Когда я создавал резюме в Angular, я хотел показать mat-horizontal-stepper, когда экран больше 700px, и mat-vertical-stepper, когда он меньше его. Поэтому я создал событие от HostListener до window:resize.

Это мое развернутое резюме, если вы измените размер, вы увидите ожидаемое поведение.

Вот как мои HTML с horizontalStepper, в строке 23 вы можете увидеть, что если значение истинно, показать что-то, в противном случае показать что-то еще.

А это файл TS моего компонента, в строке 36 вы можете найти HostListener.