Angular 6 路由器出口样式应用于其下方的元素

Question

我正处于向角度应用程序添加路由器转换的阶段，我面临着奇怪的问题。for 的样式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样式，但到目前为止我还无法弄清楚。

Answer 1

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

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