角形路由器出口子无法填充空间

Question

我在用路由器插座填充所有可用空间时遇到问题。

我在应用程序中使用了角度/弯曲布局。路由器所装载的组件并不会占据所有可用空间。

<div fxLayout="column" fxFlexFill>
  <maat-top-bar></maat-top-bar>
  <router-outlet fxFlex></router-outlet>
</div>

应用和dom的屏幕截图

路由器插座占用空间而不是子组件。在屏幕截图中，组件为<maat-home></maat-home>。在DOM树中，此组件位于路由器出口之后。

我该怎么办，组件<maat-home></maat-home>将占用剩余空间？

谢谢！

Answer 1

添加fxFlex到<router-outlet>可能不是您想要的。路由器添加的组件将作为同级组件添加，而不是作为子组件添加<router-outlet>

Answer 2

我找到了一个方法。router-outlet 是隐藏的，并且在 DOM 上添加的组件具有fxFlexFill填充所有可用空间的属性。

<div fxLayout="column" fxFlexFill>
  <maat-top-bar class="top-bar"></maat-top-bar>
  <div fxFlex>
   <router-outlet class="hidden-router"></router-outlet>
  </div>
</div>

班上hidden-router

.hidden-router {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

和组件

<div fxFlexFill="">
  I filling all remaining space
</div>