Я сейчас решаю проблему с макетом в Angular и надеюсь, что есть быстрое (более быстрое) решение, о котором я сейчас не думаю.
Вот наглядное представление о том, как моймакет в настоящее время структурирован.(Маленькая черная полоска сверху - это просто метка для дизайна)
В HTML, app.component.html
, это выглядит так.
<div id="wrapper">
<app-navbar></app-navbar>
<div id="content">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
Проблема, с которой я сталкиваюсь, состоит в том, что у меня теперь есть одна страница в моем приложении, которая полностью нарушает эту модель макета и структуру Angular router-outlet
, которую я показал выше.Вот изображение.
Как видите, слева есть новая панель навигации, которая занимает всю вертикальную высоту.Старая навигационная панель теперь сжимается до оставшейся ширины с содержанием router-outlet
ниже того, которое также сжимается до оставшейся ширины (они оба на всю ширину в первом изображении, даже если по бокам есть некоторое поле).
В приложении уже много представлений, и это единственное представление, имеющее макет такого типа.
Все по-прежнему должно быть отзывчивым, и я не могу придумать простого исправления без полной переоценки большинствакомпоновки, по сути, должны быть двумя навигационными панелями вначале, причем навигационная панель и содержимое расширяются, чтобы заполнить оставшуюся ширину, если вторичная навигационная панель не видна.Я бы предпочел избежать этого.Я обдумываю это?