6

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

我为我的应用程序使用 angular/flex-layout。并且与路由器一起加载的组件并没有占据所有可用的位置。

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

app & dom 截图

路由器插座占用空间而不是子组件。在屏幕截图上,组件是<maat-home></maat-home>. 在 DOM 树中,该组件放置在 router-outlet 之后。

我该怎么做才能使组件<maat-home></maat-home>占用剩余空间?

谢谢!

4

2 回答 2

5

我找到了一个方法。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>
于 2017-05-16T05:31:49.647 回答
4

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

于 2017-05-12T09:47:32.690 回答