angular - Angular 中的条件布局，带有两个导航栏

我目前在 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>

我遇到的问题是我现在在我的应用程序中有一个页面，它完全破坏了这个布局模型和router-outlet我上面显示的 Angular 结构。这是视觉效果。

如您所见，左侧有一个新的导航栏，占据了所有的垂直高度。旧的导航栏现在缩小到剩余宽度，router-outlet内容低于也缩小到剩余宽度（即使侧面有一些边距，它们在第一张图像中都是全宽的）。

应用程序中已经有很多视图，这是唯一具有这种布局的视图。

一切仍然需要响应，如果不完全重新做大部分布局基本上首先是两个导航栏，我想不出一个简单的修复，如果辅助导航栏不是，导航栏和内容扩展以填充剩余宽度可见的。

有一些非常老套的方法可以解决这个问题，但这会使响应式成为一场噩梦，我宁愿避免这种情况。这是我想太多了吗？

标签： angularlayoutresponsive-design