Angular 6 router-outlet 样式应用于其下方的元素

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 的样式，因为它不会被渲染（它只是一个占位符）

Answer 2

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

Angular 6 router-outlet 样式应用于其下方的元素

Angular 6 router-outlet styling applied to element below it

html

angular

sass

angular-animations