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

Question

我正处于将路由器转换添加到 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;
}

动画运行流畅，我对此没有问题。但是 router-outlet 样式应用于它下面的元素，这使得页脚固定在底部，覆盖内容。如果我清除 router-outlet 元素的样式，则动画将无法正常工作。

如您在屏幕上所见<app-overview>元素有 router-outlet导致问题的样式。我想解决方案在于正确的 scss 样式，但到目前为止我还没有弄明白。

Answer 1

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

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