Angular router-outlet 子填不上space

Question

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

我使用 angular/flex-layout 来申请。并且路由器加载的组件并没有占据所有可用位置。

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

Screenshot of app & dom

router-outlet 使用 space 而不是子组件。在屏幕截图上，该组件是 <maat-home></maat-home>。在 DOM 树中，此组件放置在 router-outlet 之后。

我该怎么做才能让组件 <maat-home></maat-home> 占用剩余的 space？

谢谢！

Answer 1

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

的 child

Answer 2

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

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

class hidden-router

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

和组件

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

Angular router-outlet 子填不上space

Angular router-outlet child can't fill space

angular

angular-ui-router

angular2-routing

angular-routing

angular-flex-layout