Angular 6 路由器插座样式应用于其下方的元素答案

【问题标题】：Angular 6 router-outlet styling applied to element below itAngular 6 路由器插座样式应用于其下方的元素
【发布时间】：2019-01-08 21:14:14
【问题描述】：

我正处于向 Angular 应用程序添加路由器转换的阶段，我面临着奇怪的问题。 router-outlet 的样式被应用到 DOM 层次结构中它下面的元素。

这是我的代码：

<main role="main">
  <!-- Header -->
  <app-header class="topnavbar-wrapper"></app-header>
  <!-- Page content-->
  <div [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
  </div>
  <!-- Footer -->
  <app-footer></app-footer>
</main>

样式：

main {
  box-sizing: border-box;
  margin-top: 4.5rem;
  min-height: 92vh;
  padding-bottom: 4rem;
  /* Height of footer */
  position: relative;
}
router-outlet ~ * {
  position: absolute;
  height: 100%;
  width: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: $secondary;
}

动画运行流畅，我对此没有任何问题。但是路由器插座样式应用于它下面的元素，这使得页脚固定在底部，覆盖了内容。如果我清除路由器插座元素的样式，那么动画将无法正常工作。

正如您在屏幕上看到的 <app-overview> 元素具有 router-outlet 样式，这就是导致问题的原因。我想解决方案在于正确的 scss 样式，但到目前为止我无法弄清楚。

【问题讨论】：

标签： html angular sass angular-animations

【解决方案1】：

选择器router-outlet ~ * 选择所有router-outlet 兄弟姐妹，这就是它适用于app-overview 的原因。

此外，您不应该尝试设置 router-outlet 的样式，因为它没有被渲染（它只是一个占位符）

【讨论】：

解决方法是什么？如果 router-outlet 没有设置样式，我可以看到停用的路由组件在消失之前向下移动
@dallows 我回答了主要问题“为什么将路由器插座样式应用于其下方的元素”，但最终目的仍不清楚。也许发布更多代码甚至是 StackBlitz 来澄清
有道理，它回答了我的问题。
你是怎么做到的？你能修复页脚吗？

【解决方案2】：

我正在开发一个主要使用 Angular 的 Ionic 项目，我想设置路由器插座的样式以遵循我应用的 CSS 网格，ion-router-outlet 没有成功，所以我使用了router-outlet，它运行良好。与问题相关但不是那么具体，可能会帮助那里的人。

【讨论】：