如何在角度 5 中设置路由器插座的最小高度

Question

在下面的代码中，路由器出口位于"app-header"和"app-footer"组件之间。如何检索屏幕高度和"应用标题"高度？我想将这两个高度((屏幕(-('应用程序标头'((的扣除设置为路由器的最小高度 outlet.is 可能吗？

app.components.ts

  <app-header (toggleMenu)="toggleMenu($event)" *ngIf="headerVisible"></app-header>
    <!-- Content -->
      <router-outlet (activate)="onActivate($event)"></router-outlet>
    <!-- Footer -->
      <app-footer (toggleFooterLanguage)="toggleFooterLanguage($event)" *ngIf="footerVisible"></app-footer>

Answer 1

app.component.html

<div class="my-router-outlet">
    <router-outlet></router-outlet>
</div>

app.component.scss

.my-router-outlet {
   /* reduce the height of header and footer(170px) as an example*/
   min-height: calc(100vh - 170px); 
}