Условный макет в Angular с двумя навигационными панелями - PullRequest
0 голосов
/ 17 января 2019

Я сейчас решаю проблему с макетом в Angular и надеюсь, что есть быстрое (более быстрое) решение, о котором я сейчас не думаю.

Вот наглядное представление о том, как моймакет в настоящее время структурирован.(Маленькая черная полоска сверху - это просто метка для дизайна)

enter image description here

В 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, которую я показал выше.Вот изображение.

enter image description here

Как видите, слева есть новая панель навигации, которая занимает всю вертикальную высоту.Старая навигационная панель теперь сжимается до оставшейся ширины с содержанием router-outlet ниже того, которое также сжимается до оставшейся ширины (они оба на всю ширину в первом изображении, даже если по бокам есть некоторое поле).

В приложении уже много представлений, и это единственное представление, имеющее макет такого типа.

Все по-прежнему должно быть отзывчивым, и я не могу придумать простого исправления без полной переоценки большинствакомпоновки, по сути, должны быть двумя навигационными панелями вначале, причем навигационная панель и содержимое расширяются, чтобы заполнить оставшуюся ширину, если вторичная навигационная панель не видна.Я бы предпочел избежать этого.Я обдумываю это?

...